textfield css specificity issue

[J D]

Hi,

I am using nitobi components and its input definition seems to override my textfield definition. I amn't able to get a higher specificity for the definition below.


/* css defined within nitobi */
.nitobi input, .nitobi textarea, .nitobi select, .nitobi ntb-input {
color:#333333;
font-family:Tahoma, Arial, Verdana;
font-size: 12px;
border:0px solid #000000;
padding:0px 2px 0px 4px;
width: 100px;
}

/* css defined by me*/
.basic, textfield .basic, .nitobi textfield .basic, .nitobi input .basic{
border-width: 1px;
border-style: solid;
border-color: #999999;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
width: 200px;
height: 15px;
}

<s:textfield label="" name="" id = "" size="15" maxlength="15" cssClass="basic" cssStyle="basic"/>

[Fang]

textfield is not an element, that would be input.
If changing that does not help then give it an id.

[J D]

It works with the id but ...

<s:textfield label="" name="" id = "textField1" size="15" maxlength="15" cssClass="basic"/>

I have a lot of input fields within the nitobi grid which needs to be overridden and the implementation does not look clean having to define each id as a style to override. I was hoping to get a single css class with can override. This is what I found..

#textField1 - overrides (successful)
.nitobi input .basic - does not override (unsuccessful)
#textField1 .nitobi input - does not override (unsuccessful)

Just though I should let you know. I was able to override the following
.nitobi, .nitobi td with .nitobi td .value

Thanks for your help.