how to change css styles of custom jquery widget?

Question

this is my code so far I tried.I create a wiget it contain a textarea with row lines. I want to change this widgets backround color for Onfocus and OnfocusOut evets. how to do that?

<!doctype html>
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>           

   </head>
   <body>

          <script>
         $(function() {


            $.widget("iP.MultilineText", {
                _create: function(){
                    this._textarea = $("<textarea rows ='5'>");

                    this._textarea.css("background-size","100% 13px");
                    this._textarea.css("border","none");
                    this._textarea.css("font-size","12");
                    this._textarea.css("line-height","12px");
                    this._textarea.css("background-image","linear-gradient(#33ccff, #33ccff 12px, #ffffff 12px, #ccc 13px, white 13px)");
//                    this._textarea.css("focus{outline: none;}"");
                    this._textarea.focus(function(){
                        this._textarea.css('background-color':'yellow')}); //<---- this is the //palce the code should come to change color while focus

                    this._textarea.focusout(function(){alert('focust out')});
                $(this.element).append(this._textarea);
                } 
            });

            $("#mulText").MultilineText();         

         });
      </script>

          <div id="mulText" ></div>

   </body>
</html>

Answer 1

you need to change this to $(this) in your focus function and backgroun-image property is blocking you backgound-color . so you need to put $(this).css('background-image','none');

            this._textarea.focus(function(){
                $(this).css('background-image','none'); // add this
                $(this).css('background-color','yellow');
            }); //<---- this is the //palce the code should come to change color while focus

Answer 2

You can use the below code for both focus and focusout

this._textarea.focus(function(){
    $(this).css('background-image','linear-gradient(rgb(255, 255, 0), rgb(255, 255, 0) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')}); 

this._textarea.focusout(function(){
    $(this).css('background-image','linear-gradient(rgb(51, 204, 255), rgb(51, 204, 255) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')
});

how to change css styles of custom jquery widget?

Question

2 answers

solution1
1 2014-11-07 09:24:21

solution2
1 ACCPTED 2014-11-07 09:28:17

how to change css styles of custom jquery widget?

Question

2 answers

solution1 1 2014-11-07 09:24:21

solution2 1 ACCPTED 2014-11-07 09:28:17

solution1
1 2014-11-07 09:24:21

solution2
1 ACCPTED 2014-11-07 09:28:17