69437


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

[code]

    /*チェックは見えなくする*/
    .hidden_box input {
        display: none;
    }
    
    
[/code]

検索ボックスもinputを利用しているので、虫眼鏡のアイコンや、検索ボックスに placeholder="キーワード検索"が表示されない状態です。  
やりたいこととしては、[diesel](https://www.diesel.co.jp/)の様に虫眼鏡マークを押下後、下に検索ボックスが出てくる仕様にしたいと考えてます。

よろしくお願いします。

[code]

    @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;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2020-08-11T01:38:22.557
69436
2020-08-11T02:20:19.770
40597
question
html css
CSS ボタンクリックで表示非表示


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

[code]

    @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;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2020-08-11T02:20:19.770
69437
2020-08-11T02:20:19.770
41455
69436
answer