要素の色を変える

[[module css]]
/*検索ボックス 文字入力欄*/
#search-top-box-input{
background-color:#FFF;
color:#999;
border:#AAA;
box-shadow:0px 0px 6px0px #333377;
-moz-box-shadow:0px 0px 6px 0px #333377;
-webkit-box-shadow:0px 0px 6px 0px #333377;
}

#search-top-box-input:hover{
background-color:#FFF;
color:#999;
border:#AAA;
box-shadow:6px 6px 6px6px #777733;
-moz-box-shadow:6px 6px 6px6px #777733;
-webkit-box-shadow:6px 6px 6px6px #777733;
}

#search-top-box-input:focus{
background-color:#FFF;
color:#999;
border:#AAA;
box-shadow:6px 6px 6px6px #333377;
-moz-box-shadow:6px 6px 6px6px #333377;
-webkit-box-shadow:6px 6px 6px6px #333377;
}

/*検索ボックス 検索ボタン*/
#search-top-box-form input[type="submit"]{
background-image:none;
border:solid #CCF 2px;
color:#FFF;
background: linear-gradient(#66F, #005);
box-shadow:0px 0px 7px0px #000;
-moz-box-shadow:0px 0px 7px 0px #000;
-webkit-box-shadow:0px 0px 7px 0px #000;
}

#search-top-box-form input[type="submit"]:focus{
background-image:none;
border:solid #CCF 2px;
color:#FFF;
background: linear-gradient(#66F, #005);
box-shadow:0px 0px 7px0px #000;
-moz-box-shadow:0px 0px 7px 0px #000;
-webkit-box-shadow:0px 0px 7px 0px #000;
}

#search-top-box-form input[type="submit"]:hover{
background-image:none;
border:solid #FFF 2px;
color:#FFF;
background: linear-gradient(#99F, #225);
box-shadow:0px 0px 2px0px #FFF;
-moz-box-shadow:0px 0px 2px 0px #FFF;
-webkit-box-shadow:0px 0px 2px 0px #FFF;
}
[[/module]]

検索ボックスに使われている各要素の色等を変更すると検索ボックスのデザインが変わります。
疑似クラスというものを最低3つは使わないといけないので難しい部類の構文になるでしょう。

戻る

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License