0

ボタンを押した時に検索ボックスを表示したいと思ってます。

/*チェックは見えなくする*/
.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="&#xf002">
</form>
  <!--ここまで-->
</div>
</div>

1 件の回答 1

2

display: noneを指定する箇所をtypeで絞るのはいかがでしょうか?

@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[type=checkbox] {
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="&#xf002">
</form>
  <!--ここまで-->
</div>
</div>

2
  • ありがとうございます。思い通りにできました!
    – magu
    Commented 2020年8月11日 8:08
  • よかったです!ちなみにですが、現在の仕様だと後々検索欄に別のチェックボックスを実装したくなる可能性がありそうなので、隠したいチェックボックスには個別でクラスを振って消した方が良いかと思いました! Commented 2020年8月11日 10:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。