design - Can this CSS syntax be improved, be made more organized? -

A clear way to write the same CSS is given input name F1 to F7 all Is the first line like type = text ?

Thanks

 #tform input [type = "text"] {-moz -border- Radius: 6px; Border: 1 px solid green; # Input input [name = "F1"], # input input [name = "F2"], # input input [name = "F3"], # input input [name = "F4"], # input Input [name = "F5"] {width: 40%; } #input input [name = "f6"] {width: 80%; Display area; } #input input [name = "f7"] {width: 80%; } 

My problem is that I have 3 additional inputs: names F8, F8, F10 , also type = text which I give them Am Width:%; Naturally set width without

I thought about putting 40% in the first row and overriding the rest, but then those extra 3 will take 40% by default.

Clear it and use class selectors:

 . Input_text {-message-radius: 6px; Border: 1 px solid green; }. Stella {width: 40%; } .styleb {width: 80%; Display area; }. Stylize {width: 80%;}  

and then in your HTML:

  & lt; Input type = "text" name = "f1" class = "input_text stylea" /> & Lt; Input type = "text" name = "f2" class = "input_text stylea" /> & Lt; Input type = "text" name = "f3" class = "input_text stylea" /> & Lt; Input type = "text" name = "f4" class = "input_text stylea" /> & Lt; Input type = "text" name = "f5" class = "input_text stylea" /> & Lt; Input type = "text" name = "f6" class = "input_text styleb" /> & Lt; Input type = "text" name = "f7" class = "input_text stylec" />  

For any additional input elements, you can simply use the CSS selector style in this case .input_text , and additional class selectors ( Style, .styleb, .stylec ).

So when you add the rest:

  & lt; Input type = "text" name = "F8" class = "input_text" /> & Lt; Input type = "text" name = "F9" class = "input_text" /> & Lt; Input type = "text" name = "F10" class = "input_text" />  

They will look similar to other inputs but will not be constrained with the remaining width.