CSSをマージするにはどのようにidの代わりにJSでクラスを使用する

Question

入力フィールドのための私のアプリケーションの1つ私はこのデザインをしています。

ピック 私のコード

<input class="myCombo-combobox" name="language" style="width:30%;"> 

.textbox { 
    position: relative; 
    border: 1px solid #95B8E7; 
    background-color: #fff; 
    vertical-align: middle; 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    margin: 0; 
    padding: 0; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
} 
.textbox .textbox-text { 
    font-size: 12px; 
    border: 0; 
    margin: 0; 
    padding: 4px; 
    white-space: normal; 
    vertical-align: top; 
    outline-style: none; 
    resize: none; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    border-radius: 5px 5px 5px 5px; 
} 
.textbox .textbox-text::-ms-clear, 
.textbox .textbox-text::-ms-reveal { 
    display: none; 
} 
.textbox textarea.textbox-text { 
    white-space: pre-wrap; 
} 
.textbox .textbox-prompt { 
    font-size: 12px; 
    color: #aaa; 
} 
.textbox .textbox-bgicon { 
    background-position: 3px center; 
    padding-left: 21px; 
} 

.textbox-addon { 
    position: absolute; 
    top: 0; 
} 

.textbox-label-after { 
    padding-left: 5px; 
    padding-right: 0; 
} 
.textbox-label-top { 
    display: block; 
    width: auto; 
    padding: 0; 
} 
.textbox-disabled, 
.textbox-label-disabled { 
    opacity: 0.6; 
    filter: alpha(opacity=60); 
} 

.combo-arrow { 
    width: 18px; 
    height: 20px; 
    overflow: hidden; 
    display: inline-block; 
    vertical-align: top; 
    cursor: pointer; 
    opacity: 0.6; 
    filter: alpha(opacity=60); 
} 
.combo-arrow-hover { 
    opacity: 1.0; 
    filter: alpha(opacity=100); 
} 
.combo-panel { 
    overflow: auto; 
} 
.combo-arrow { 
    background: url('images/combo_arrow.png') no-repeat center center; 
} 
.combo-panel { 
    background-color: #ffffff; 
} 
.combo-arrow { 
    background-color: #E0ECFF; 
} 
.combo-arrow-hover { 
    background-color: #eaf2ff; 
} 
.combo-arrow:hover { 
    background-color: #eaf2ff; 
} 
.combo .textbox-icon-disabled:hover { 
    cursor: default; 
} 
.combobox-item, 
.combobox-group, 
.combobox-stick { 
    font-size: 12px; 
    padding: 3px; 
} 
.combobox-item-disabled { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 
.combobox-gitem { 
    padding-left: 10px; 
} 
.combobox-group, 
.combobox-stick { 
    font-weight: bold; 
} 
.combobox-stick { 
    position: absolute; 
    top: 1px; 
    left: 1px; 
    right: 1px; 
    background: inherit; 
} 
.combobox-item-hover { 
    background-color: #eaf2ff; 
    color: #000000; 
} 
.combobox-item-selected { 
    background-color: #ffe48d; 
    color: #000000; 
} 
.combobox-icon { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    vertical-align: middle; 
    margin-right: 2px; 
} 

他の場所私はこのよう

ピック

var myTable = '<input type="text" class="combobox"; style="width:30%;" id="myInput" onkeyup="myFunction()" title="Type in a name">' + 
    '<table id="myTable">' + '<tr class="header"></tr>' + '<tr><td></td></tr>' + '</table>'; 

ように私の入力フィールドを作成しています私のCSS 210

私の第二のアプリケーションのための私のCSS

* { 
    box-sizing: border-box; 
} 
#myInput { 
    background-image: url('Drop.png'); 
    background-position: 10px 10px; 
    background-repeat: no-repeat; 
    width: 30%; 
    font-size: 16px; 
    padding: 12px 20px 12px 40px; 
    border: 1px solid #ddd; 
    margin-bottom: 12px; 
} 
#tdiv{ 
    height : 30%; 
    overflow-y:auto; 

} 

tbody { 
    display: block; 
} 

tbody { 
    max-height: 150px; 
    overflow: auto; 
} 
#myTable { 
    border-collapse: collapse; 
    width: 30%; 
    border: 1px solid #ddd; 
    font-size: 18px; 
    display: none; 
    margin-top:-12px; 
} 

#myTable th, #myTable td { 
    text-align: left; 
    padding: 12px; 
    width : 10%; 
} 

#myTable tr { 
    border-bottom: 1px solid #ddd; 
    order-top: 1px solid #ddd; 
} 

#myTable tr.header, #myTable tr:hover { 
    background-color: #f1f1f1; 
} 

#myInput:focus + #myTable{ 
    display: block; 
} 

#myTable:hover{ 
display: block; 
} 

も私がデザインの第一種が欲しいです。どのように私はクラスのID instedを使用しているので、CSSで作る。 2.テーブルの入力データに下線を引いて、 ";"分離された。

Answer 1

同じスタイリングで同じクラスを使用します。あなたはclassとidを一緒に使うことができます。クラスは多くのアイテムで同じスタイルを使用するために使用され、idは一意の識別子です。

あなたは、ドロップダウンをしたい場合は、

<select class="myCombo-combobox" name="language" style="width:30%;" id="myInput" onkeyup="myFunction()"> 
    <option> A </option> 
    <option> B </option> 
    <option> C </option> 
</select> 

Answer 2

CSSクラスを使用し、すなわち、いくつかの要素に同じスタイルを適用し、再利用を可能にします。

HTML要素では、idとclassの両方を使用できます。また、idやclassで選択するCSS規則も使用できます。

異なるCSSルールが同じ要素に適用される場合、競合が発生した場合、「最も近い」ものが優先されます。 idとclassセレクタの場合、idはより具体的であるため、id CSSルールはクラスに関連するものより高い優先度を持ちます。競合がなければ、両方とも適用されます。