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.
Comments
Post a Comment