2017-10-10 22 views
1

私はデフォルト以外の異なる値に入力を設定するCSSファイルを持っています。属性をデフォルト値に戻すにはどうすればいいですか?

input[type=text]{ 
    text-align: center; 
    border: none; 
    background-color: #EBEBEB; 
    border-radius: 5px; 
    width: 100%; 
    padding: 12px; 
    margin-top: 25px; 
    display: inline-block; 
    box-sizing: border-box; 
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, 
    "Bitstream Vera Sans Mono", monospace; 
} 

は、今私は、デフォルト値を持つWebページ上の他の場所に、この入力を使用します。 INPUTの残りの部分を損なうことなく、Webページの特定の部分だけをデフォルトに設定するにはどうすればよいですか?

+2

:?次の例を参照してください。 – Terry

+1

あなたの入力にIDを与えて、どんなスタイル属性でも上書きできます。 –

答えて

2

あなたが解決し:not、追加クラスを使用することができますが、この:すでにあなたの質問のコメントで述べたように

input[type=text]:not(.default) { 
 
    text-align: center; 
 
    border: none; 
 
    background-color: #EBEBEB; 
 
    border-radius: 5px; 
 
    width: 100%; 
 
    padding: 12px; 
 
    margin-top: 25px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, 
 
    "Bitstream Vera Sans Mono", monospace; 
 
}
<input type="text" value="Hello StackOverflow"/> 
 
<input class="default" type="text" value="Hello StackOverflow"/>

よりよい解決策、クラスを使用してスコープを使用することです。したがって、クラスを使用して特定の<input type="text"/>要素のみをフォーマットしてください!ご入力の代わりにすべての入力要素に影響グローバルスタイルを適用するクラスを与える

input[type=text].style1 { 
 
    text-align: center; 
 
    border: none; 
 
    background-color: #EBEBEB; 
 
    border-radius: 5px; 
 
    width: 100%; 
 
    padding: 12px; 
 
    margin-top: 25px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, 
 
    "Bitstream Vera Sans Mono", monospace; 
 
}
<input class="style1" type="text" value="Hello StackOverflow"/> 
 
<input type="text" value="Hello StackOverflow"/>

関連する問題