Question

I have a script which generates input boxes dynamically,

    var gridBuilder = function() {
    var html = [];
    for (var index = 1; index <= gridSize * gridSize; index++) 
    {

        html.push("<input id='id" + index + "' class='field' type='text' size='3' maxlength='3' name='name" + index + "'/>");
    }
    return html.join("");
};

I am applying the following CSS.

.field {  
  padding: 5px;  
  font-size: 15px;  
  text-shadow: 0px 1px 0px #fff;  
  outline: none;  
  background: -webkit-gradient(linear, left top, left bottombottom, from(#bcbcbe), to(#ffffff));  
  background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  border: 1px solid #717171;  
} 

My css is linked to the correct class isn’t it? The issue is that none of the CSS defined in .field is showing up on my input.

Answer 1

It works as expected for me !

I made you a jsFiddle so you can see if you are doing something different 🙂

http://jsfiddle.net/neYXk/3/

Maybee you are doing a document.write in a bad place an “overwriting” the core html includeing your css ?

You should start using http://jquery.com/ ! Makes js life so much easier 🙂 !