Need CSS for list/select same as existing input/textarea

Question

I have these css for my form but it lack of css for drop down list/select. I need same format as below:

CSS:

form input[type="password"], form input[type="text"] {
display: block;
width: 94%;
margin: 5px 0;
padding: 8px;
color: #777;
font-family: Arial;
font-size: 13px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

border: 1px solid #ADADAD;
outline: none;
}

form textarea {
display: block;
width: 94%;
margin: 5px 0;
padding: 8px;
color: #777;
font-family: Arial;
font-size: 13px;
overflow: auto;
resize: none;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

border: 1px solid #ADADAD;
outline: none;
}

http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — He Hui, Sep 11 '12 at 11:51
add 'select' in selectors list, not sure if all browsers will support and display CSS correctly. — Riz, Sep 11 '12 at 11:52

Rikki · Accepted Answer · 2012-09-11T12:12:15.760

You should use CSS class names for inputs based on their type. For instance, text input should have a CSS class name "TextBox" and check input should have a CSS class name "CheckBox" and you can set all the css attributes separately. Also you can set multiple CSS class names on a single element like "Control TextBox Disabled", "Control CheckBox", or "Control Label Red-Text".

Also you can use JQuery selector and find any kind of input and do whatever you want.

I hope this helps:

.Control
{
    display: block;
    width: 94%;
    color: #777;
    font-family: Arial;
    font-size: 13px;
}

.TextBox-Base
{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ADADAD;
    outline: none;
    margin: 5px 0;
    padding: 8px;
}

.TextBox, 
.PasswordBox
{
}

.RichTextBox
{
    overflow: auto;
    resize: none;
}

.DropDownList
{
}

HTML sample code:

<input type="text" class="Control TextBox-Base PasswordBox" />
<input type="password" class="Control TextBox-Base PasswordBox" />

<textarea class="Control TextBox-Base RichTextBox"></textarea>

<select class="Control DropDownList" ></select>

Selecting elements using JQuery:

$(".TextBox-Base") //returns all the elements that has "TextBox-Base" class name included.

$(".TextBox") //returns all the elements that has "TextBox" class name included.

$(".PasswordBox") //returns all the elements that has "PasswordBox" class name included.

$(".RichTextBox") //returns all the elements that has "RichTextBox" class name included.

$(".DropDownList") //returns all the elements that has "DropDownList" class name included.

Cheers

What should I put to class=TextBox and PasswordBox? I tired class="Control TextBox-Base" but the effect not good. — Alouty, Sep 12 '12 at 04:22
What do you mean? Your control is both TextBox and PasswordBox?! — Rikki, Sep 12 '12 at 06:07
If you need to set something different for TextBox and PasswordBox, yeah. I just left it for you to need how to implement styles. Cheers — Rikki, Sep 13 '12 at 09:01

score 0 · Answer 2 · answered Sep 11 '12 at 11:51

0

you can use the select selector

form select {

}

answered Sep 11 '12 at 11:51

marco.eig

4,169
2
17
26

Need CSS for list/select same as existing input/textarea

2 Answers2