ボタンを押した時に検索ボックスを表示したいと思ってます。
/*チェックは見えなくする*/
.hidden_box input {
display: none;
}
検索ボックスもinputを利用しているので、虫眼鏡のアイコンや、検索ボックスに placeholder="キーワード検索"が表示されない状態です。
やりたいこととしては、dieselの様に虫眼鏡マークを押下後、下に検索ボックスが出てくる仕様にしたいと考えてます。
よろしくお願いします。
@charset "utf-8";
/*全体*/
.hidden_box {
margin: 2em 0;/*前後の余白*/
padding: 0;
}
/*ボタン装飾*/
.hidden_box label {
padding: 15px;
font-weight: bold;
border: solid 2px black;
cursor :pointer;
}
/*ボタンホバー時*/
.hidden_box label:hover {
background: #efefef;
}
/*チェックは見えなくする*/
.hidden_box input {
display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}
.search_container{
box-sizing: border-box;
position: relative;
border: 1px solid #999;
padding: 3px 10px;
border-radius: 20px;
height: 2.3em;
width: 260px;
overflow: hidden;
}
.search_container input[type="text"]{
border: none;
height: 2.0em;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"]{
cursor: pointer;
font-family: FontAwesome;
font-size: 1.3em;
border: none;
background: none;
color: #3879D9;
position: absolute;
width: 2.5em;
height: 2.5em;
right: 0;
top: -10px;
outline : none;
}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="hidden_box">
<label for="label1">クリックして表示</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show">
<!--非表示ここから-->
<form method="get" action="#" class="search_container">
<input type="text" size="25" placeholder="キーワード検索">
<input type="submit" value="">
</form>
<!--ここまで-->
</div>
</div>