検索ボックスの背景色を変更したいです

検索ボックスの背景色を変更したいです。
実現したいこととしましては、以下の画像のように検索ボックスの背景画像の色を変更したいです。

以下は自分で作成したコードとなります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta  charset="utf-8">
5  <link rel="stylesheet" href="normalize.css">
6  <link rel="stylesheet" href="github.css" />
7</head>
8<body>
9  <header>
10    <div class="header_menu header_flex">
11      <div>
12        <a href="#">
13          <svg class="githubIcon" viewBox="0 0 16 16" version="1.1" height="32" width="32" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>      
14        </a>
15      </div>
16      <div class="search_box_wrap">
17        <label>
18          <form action="#" method="get">
19            <input id="search_box"name="serch" placeholder="Serch or jump to..." type="txt" />
20          </form>
21          <img class="search_img"alt="search_key_slash"src="img/search-shortcut-hint.svg">
22        </label>      
23      </div>
24        <ul class="header_link header_flex flex_items_center text_bold">
25          <li><a href="#">Pull request</a></i>
26          <li><a href="#">Issues</a></li>
27          <li><a href="#">Marketplace</a></li>
28          <li><a href="#">Explore</a></li>
29        </ul>
30      
31      <div class="nav_list">
32        <ul class="user_nav">
33
34          <li><a href="#"><svg class="header_nav_bell" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M13.99 11.991v1H0v-1l.73-.58c.769-.769.809-2.547 1.189-4.416.77-3.767 4.077-4.996 4.077-4.996 0-.55.45-1 .999-1 .55 0 1 .45 1 1 0 0 3.387 1.229 4.156 4.996.38 1.879.42 3.657 1.19 4.417l.659.58h-.01zM6.995 15.99c1.11 0 1.999-.89 1.999-1.999H4.996c0 1.11.89 1.999 1.999 1.999z"></path></svg></a></li>
35          <li>
36            <details>
37              <summary>
38                <svg class="header_nav_plus float_left" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
39                <span class="dropdown_caret"></span>
40              </summary>
41              <a role="menuitem" href="#">New repository</a>
42              <a role="menuitem" href="#">Import repository</a>
43              <a role="menuitem" href="#">New gist</a>
44              <a role="menuitem" href="#">New organization</a>
45            </details>
46          </li>
47          <li>
48            <details>
49              <summary class="avator">
50                <img class="float_left" src="img/avatar.png" width=20 height=20 />
51                <span class="dropdown_caret"></span>
52              </summary>
53              <ul>
54                <li>
55                  <a href="#">Signed in as<strong>USER NAME</strong>></a>
56                </li>
57                <li>
58                  <a role="menuitem" href="#">Your profile</a>
59                </li>
60                <li>
61                  <a role="menuitem" href="#">Your repositories</a>
62                </li>
63                <li>
64                  <a role="menuitem" href="#">Your stars</a>
65                </li>
66                <li>
67                  <a role="Your gist" href="#">Your gist</a>
68                </li>
69                <li>
70                  <a role="menuitem" href="#">Help</a>
71                </li>
72                <li>
73                  <a role="menuitem" href="#">Setting</a>
74                </li>
75                <li>
76                  <a role="menuitem" href="#">Sign out</a>
77                </li>
78              </ul>
79            </details>
80          </li>
81        </ul>  
82      </div>
83    </div>    
84
85  </header>
86
87
88
89</body>
90
91</html>
92

css
1*{
2    box-sizing:border-box;
3}
4.body{
5   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
6   line-height:1.5;
7}
8.text_bold{
9    font-weight:600;
10}
11.header{
12    padding
13}
14svg {
15    fill: currentColor;
16  } 
17
18
19.githubIcon{
20    color:white; 
21    margin-left:16px;
22    margin-right:13px;
23}
24.search_img{
25    position: absolute;
26    top: 0;
27    right: 0;
28    margin:2px 2px;
29    
30}
31#search_box{
32    background-color:hsla(0,0,100%,0.125);
33}
34.search_box_wrap {
35
36    position: relative;
37}
38.avator{
39    margin-right:16px;
40}
41
42
43header{
44    background-color:#000;
45}
46.header_link{
47    font-size:14px;
48}
49.header_flex{
50    display:flex;
51    align-items: center;
52}
53
54
55.flex_items_center{
56    display:flex;
57    justify-content: space-between;
58}
59.flex_items_center a{
60   text-decoration:none;
61   color:#fff; 
62}
63.header_link{
64    list-style:none;
65    padding-left:8px;
66}
67.header_link li {
68    padding: 0 8px;
69}
70
71
72.user_nav{
73    display:flex;
74    list-style:none;
75
76}
77.nav_list{
78    display:flex;
79    margin-left:auto;
80}
81.header_nav_bell{
82    color:gray;
83}
84.dropdown_caret{
85    width: 0;
86    height: 0;
87    border-left: 5px solid transparent;
88    border-right: 5px solid transparent;
89    border-top: 5px solid #fff;   
90    /*ブロック要素になっている為、inline-blockで横並びにする*/
91    display: inline-block;
92    margin-bottom:1.5px;
93}
94.header_nav_plus{
95    color:#fff;
96}
97.user_nav svg,
98.user_nav img {
99    vertical-align: middle;
100}

以下は上記のコードを実行した画像です。

どなたか教えて頂けるかたいらっしゃいましたら、ご教示お願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

#search_boxのbackground-colorの指定値によるものかと思います。
hslaは

css
1hsla(色相環上の角度, 彩度, 明度, 不透明度)

なので、おそらく結構な透明度なのかなと思います。
そのため、後ろのLabelか何かの色がそのまま出ているんじゃないかなという推測なので
親要素で背景色がついているものを探し、その色を白以外にしてみてください。

あるいは検索ボックス自体を完全に不透明にしてグレーにすれば良いはずです。

投稿2018/10/12 10:09

dice142

総合スコア5158

newyee

2018/10/12 11:09

ご回答ありがとうございます。親要素で背景色を指定しているのは、「header」タグで黒を指定しているのみなのですが、色を変えてみても、検索ボックスの背景色を変更することはできませんでした。しかし「＃search_box」の背景色を「background-color:red;」としましたら、赤色が上塗りされました。 Githubのホームページのソースコードを参考にしているのですが、そちらの方では、検索ボックスに指定している、「hsla(0,0%,100%,0.125);」を削除すると検索ボックス全体が真っ白になります。赤色を指定したら上塗りされたので、ご指摘頂いたように、透明度が関係しているのかなと思ったのですが、Githubホームページの方では、親要素に指定してある、headerの背景色を変更しても検索ボックスの中身は白のままだったので、親要素の色を変えてもダメなのかなと思ったり、少し混乱してしまっている状況です...

dice142

2018/10/12 11:11

多分Labelのデフォルトの背景色なのかなと個人的に思ってますが、開発者ツールで各要素についてるCSSを見れるので、探してみてはいかがでしょう？

newyee

2018/10/12 11:17

色を変更して試してみたのは公式ホームページからデベロッパーツールからやり、hsla(0,0%,100%,0.125);もホームページの指定のものです。要素のCSSを色々みたりいじってはいるのですが、なかなか原因がつかめないです...

dice142

2018/10/12 11:21

githubのページを見てきましたが、やはりlabelにデフォルトで付いている背景色のようです。開発者ツールで見るとlabelの上の部分に「background-color: hsla(...)」がありますが、ずっと下の方にも「background-color: #fff」という指定があります。 newyee様のcssを見るとlabelタグに対してbackground-colorがないので、そのデフォルトの「background-color: #fff」が適用された状態になっているのではないでしょうか。

newyee

2018/10/12 11:33

今、#search_boxに対し「hsla(0,0%,100%,0.125）」を指定したら、何故か背景色が適用されました。 labelへの背景色の指定はしておらず、ただ、試しに、背景色を赤色にしていたものを戻しただけなのですが、何故適用されたのかが分からないです... エディッターの問題なような気がしています... お手数おかけしました。ただ、若干周りの部分で白い部分が残ってしまっているんですけどね... とりあえず、色を指定することができて良かったです。ありがとうございました。

dice142

2018/10/12 11:36

#search_boxには元からできていた気がしますが、まあできたのなら良かったです。周りが白いのは繰り返しになりますがlabelタグのデフォルトの背景色なので labelタグに対して背景色を指定すれば良いはずです。

newyee

2018/10/12 11:47

labelに対しての背景色を指定したのですが、反映されなかったので、検索ボックス「search_box」のborderに色を指定したら消えました。長々教えてくださりありがとうございました。

dice142

2018/10/12 11:49

おー？labelに指定してダメだったのは想定外ですが解決されたのでしたら何よりです。

行動規範の内容に同意します

hslaの記述方法が引っかかっているのでは。

CSS
1#search_box{
2    background-color:hsla(0,0%,100%,0.125);
3}

投稿2018/10/12 10:07

Tomowe_kosaka

総合スコア27

inputタグで検索boxを表示しているかと思いますが、
そちらにclassを新しく追加するか、
指定してあるid="search_box"などにcssで
background-color: 任意の色を指定してあげれば反映できると思います。

投稿2018/10/12 09:44

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

検索ボックスの背景色を変更したいです

関連した質問