エンジニアが学んだことをお伝えします

   
2019-06-29    Blog
   

検索フォームをアレンジ。右上に固定し、サーチボタン(虫眼鏡)をクリックしたら横に広がるCSSをつくる。

検索ボックスのデザインをシンプルにしたくて色々と試してみている。

今回のミッション

紹介するコードで行なっていること

コード

記入するコードは以下の通り。なお、色々試しているので一部不要な行もあるが、ご容赦いただければ。検索ボックスを作る上でヒントになれば幸い。

HTML

<Note>
Placeholderは記載しない。
インプットする窓については、class「s」としている。

CSS


.s{
position:absolute;
z-index:1;
top: 45px;
right: 0px;
text-align: left;
height: 28px;
width:2em;
transition: all .6s ease;
border-bottom:none;
border-right:none;
border-left:none;
border-top:none;
border-radius:0px;
background: transparent;
}
.s:focus{
width:16em;
background:white;
border-radius:3px;
position:absolute;
top:45px;
right:40px;
}
.searchsubmit {
position:absolute;
top:45;
right:0px;
vertical-align:top;
width: 35px;
height: 30px;
padding: 0;
font-family: 'Font Awesome\ 5 Free';/*虫眼鏡表示のため headerにもリンク有り*/
font-size: 18px;
color:rgba(255, 255, 255, 0.6);
border: none;
background: transparent;
cursor: pointer;
}

.s{}のメモ

.s:focus{}のメモ

.searchsubmit{}のメモ

FontAwesomeを使うためにはheaderにも記載が必要になるので注意。
以下リンク参照。

おわりに

上のコードを色が黒の写真の上に乗っけたのがこれ。

検索ボックス 虫眼鏡

で、虫眼鏡をクリックすると、こんな感じ。

検索ボックス 横に伸びた後

まだこのブログには実装してませんが、シンプルなデザインで気に入っている(というか見た目は虫眼鏡だけ)ので、そのうち使うかも。

関連記事

HOME

Related Posts

   

New Posts

Category



Yo
30代エンジニア。日々の生活や読書、仕事や海外での経験から学んだことをまとめるブログ。
好きなものはApple製品、コーヒー、革製品、デニム。旅とカメラも。Less is More.な生活に憧れる。
Profile詳細

© Yo 2017-2019