css - 既存の入力/テキストエリアと同じリスト/選択にCSSが必要

Question

フォームにこれらのCSSがありますが、ドロップダウンリスト/選択用のCSSがありません。以下と同じフォーマットが必要です：

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;
}

Answer 1

タイプに基づいて入力に CSS クラス名を使用する必要があります。たとえば、テキスト入力には「TextBox」という CSS クラス名が必要であり、チェック入力には「CheckBox」という CSS クラス名が必要であり、すべての css 属性を個別に設定できます。、 、のよう"Control TextBox Disabled"に、1 つの要素に複数の CSS クラス名を設定することもできます。"Control CheckBox""Control Label Red-Text"

また、JQueryセレクターを使用して、あらゆる種類の入力を見つけて、好きなことをすることができます.

これが役立つことを願っています：

.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 サンプル コード:

<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>

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.

乾杯

Answer 2

選択セレクターを使用できます

form select {

}