Can this CSS syntax be improved to make it more organized?
Is there a cleaner way to write the same css if input name f1 to f7
everything is type=text
as the first line?
thank
#tform input [type = "text"] {-moz-border-radius: 6px; border: 1px solid green; }
#tform input [name = "f1"],
#tform input [name = "f2"],
#tform input [name = "f3"],
#tform input [name = "f4"],
#tform input [name = "f5"] {width: 40%; }
#tform input [name = "f6"] {width: 80%; display: block; }
#tform input [name = "f7"] {width: 80%; }
My problem is that I have 3 additional inputs : name f8, f8, f10
, also type=text
which I allow them to set the width naturally without width:%;
.
I thought about putting 40% on the first line and letting others override it, but then those extra 3 will get 40% by default.
source to share
Clean it up and use a class selector:
.input_text{ -moz-border-radius:6px; border: 1px solid green; }
.stylea{ width:40%; }
.styleb{ width:80%; display:block; }
.stylec{ width:80%;}
And then in your HTML:
<input type="text" name="f1" class="input_text stylea" />
<input type="text" name="f2" class="input_text stylea" />
<input type="text" name="f3" class="input_text stylea" />
<input type="text" name="f4" class="input_text stylea" />
<input type="text" name="f5" class="input_text stylea" />
<input type="text" name="f6" class="input_text styleb" />
<input type="text" name="f7" class="input_text stylec" />
For any additional input elements, you can simply use the base CSS selector style, in this case, .input_text
and not apply the additional class selectors ( .stylea, .styleb, .stylec
) used by others.
So when you add the rest:
<input type="text" name="f8" class="input_text" />
<input type="text" name="f9" class="input_text" />
<input type="text" name="f10" class="input_text" />
They will look the same as the other entrances, but will not be limited to the rest of the width.
source to share