title: apply css to a single textbox using jQuery addClass OR a custom LoadCSS function
body: <p>I am using Django and I want to apply some css to a single textbox. I used the website enjoycss.com to create some css. I have then added this css to the end of Django's base.css:</p>
  
  <pre><code>.disabledInput {
    display: inline-block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 10px 20px;
    border: 6px solid #36c40f;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font: normal normal bold 15px/normal Georgia, serif;
    color: rgba(0,142,198,1);
    -o-text-overflow: clip;
    text-overflow: clip;
    background: rgba(252,252,252,1);
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  }
  </code></pre>
  
  <p>I have a javascript function that I have verified works, using something like this, that has nothing to do with the stylesheet:</p>
  
  <pre><code>$(this).css("background", green);
  </code></pre>
  
  <p>But if I comment that out and try to use this, it does not work:</p>
  
  <pre><code>$(this).addClass("disabledInput");
  </code></pre>
  
  <p>Why?</p>
  
  <p>In addition, I have created the same .disabledInput all by itself in its own css file named disabled.css. Then, I have tried adding that css file to the textbox attributes, like this:</p>
  
  <pre><code>$(this).loadCSS('admin/css/disabled.css');
  </code></pre>
  
  <p>The LoadCSS function looks like this:</p>
  
  <pre><code>$.fn.loadCSS = function(url) {
      if (!$('link[href="' + url + '"]').length)
          $(this).append('&lt;link rel="stylesheet" type="text/css" href="' + url + '"&gt;');
  </code></pre>
  
  <p>}</p>
  
  <p>Why doesn't it work? What am I overlooking?</p>