はてなブログ公式デザインBordeauxの検索部分を、CSSで変更
公式デザインBordeauxの、検索部分のデザインを変更しました。
結構強引です。
↓元デザイン
/*検索の見た目設定*/
.search-form {
position: relative; /*絶対位置の元を設定*/
}
/*検索文字の入力側*/
.search-module-input {
background: #dce0e0;
padding: 10px !important;
width: 140px !important;
height: 14px !important;
margin: 0 !important;
font-size: 14px !important;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 0px !important;
}
/*検索ボタン側*/
.search-module-button {
background: transparent url('/images/theme/search_g.png') 50% 50% no-repeat !important;
margin-left: -3px;
right: 8px;
top: 5px;
position: absolute; /*上の絶対位置を基準に配置*/
}
.search-formは、検索全体を纏めてるBOXです。
.search-formの中に、.search-module-inputと.search-module-buttonが配置されています。
!importantを使って、強制的に反映させています。
これをやらないと、反映されなかった・・・。