HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-2-1.css">body内の検索窓を表示させたい場所にHTMLを記載します。
<div id="search-wrap">
<form role="search" method="get" action="">
<input type="text" value="" name="" id="search-text">
</form>
<!--/search-wrap--></div>
CSSの書き方
/*========= 検索窓のためのCSS ===============*/
/*検索窓のエリア*/
#search-wrap {
position: absolute;/*絶対配置にして*/
z-index: 2;/*最前面に設定。数字は変更可*/
top:10px;
right:10px;
}
/*テキスト入力input設定*/
#search-text{
-webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
width: 60px;/*テキスト入力エリアが伸びる前の横幅*/
height: 60px;
padding: 20px;
border: none;
background:#fff url("../img/icon_search.svg") no-repeat 17px center;/*虫眼鏡アイコンを背景に表示*/
background-size: 25px 25px;
transition: all 0.5s;/*transitionを使ってスムースに伸ばす*/
outline: none;
cursor: pointer;/*カーソルを指マークに*/
}
/*テキスト入力inputにフォーカスした時の形状*/
#search-text:focus {
width: 250px;/*テキスト入力エリアが伸びる後の横幅*/
padding: 20px 0 20px 60px;
box-shadow: 0 2px rgba(6,0,1,.26);
}