how to style a search box

Question

I am trying to style my search box and it will not work. Under .search-input I am trying to change the background color of the search box to green, and I am trying to make the search box longer. Does anyone see my error? The search box drops down when you press the search icon.

jsfiddle - https://jsfiddle.net/n9uo8ek9/

document.getElementById("search-label").addEventListener("click", function(e) {
  if (e.target == this) {
    e.preventDefault();
    this.classList.toggle("clicked");
  }
});

/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
#ht-masthead .search-field {
  padding: 0 10px 0 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}

#ht-masthead .search-form {}

.search-toggle:hover #ht-masthead .search-form {
  display: block;
}

.search-form .search-submit {
  display: none;
}

.search-form {
  position: relative;
}

.search-form label {
  position: relative;
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
  background-size: cover;
    height: 70px;
}

.search-input {
  transform: translateY(-100%);
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: opacity .25s, transform .25s;
  left: 0;
  z-index: -1;
  border: 0;
  outline: 0;
  background-color:#32CD32;
}

.search-label,
.search-input {
  background: #ccc;
  padding: .5em;
  display: inline-block;
}

.clicked + .search-input {
  opacity: 1;
  transform: translateY(0);
}

<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label for="search-input" id="search-label" class="search-label">
    Search for:   
    </label>
<input id="search-input" type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
  <input type="submit" class="search-submit" value="Search" />
</form>

Are you sure you have all the relevant code? Because when I run the snippet I don't see anything looking like a search box. — Sensoray, Jun 22 '17 at 18:27
It drops down, sorry I forgot to mention that - press the search icon. — user6738171, Jun 22 '17 at 18:27

Gerard · Accepted Answer · 2017-06-22T18:33:34.953

It's probably because of the specificity. If you use the CSS below, it will work fine.

.clicked + .search-input {
  opacity: 1;
  transform: translateY(0);
  width: 200px; /* or whatever you want it to be */
  background: lightgreen;
}

document.getElementById("search-label").addEventListener("click", function(e) {
  if (e.target == this) {
    e.preventDefault();
    this.classList.toggle("clicked");
  }
});

/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/

#ht-masthead .search-field {
  padding: 0 10px 0 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}

#ht-masthead .search-form {}

.search-toggle:hover #ht-masthead .search-form {
  display: block;
}

.search-form .search-submit {
  display: none;
}

.search-form {
  position: relative;
}

.search-form label {
  position: relative;
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
  background-size: cover;
  height: 70px;
}

.search-input {
  transform: translateY(-100%);
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: opacity .25s, transform .25s;
  left: 0;
  z-index: -1;
  border: 0;
  outline: 0;
  background-color: #32CD32;
}

.search-label,
.search-input {
  background: #ccc;
  padding: .5em;
  display: inline-block;
}

.clicked+.search-input {
  opacity: 1;
  transform: translateY(0);
  width: 200px;
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label for="search-input" id="search-label" class="search-label">
    Search for:   
    </label>
  <input id="search-input" type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
  <input type="submit" class="search-submit" value="Search" />
</form>

I will make a snippet based on the code you provided – Gerard Jun 22 '17 at 18:31 — Gerard, Jun 22 '17 at 18:31
well, on my screen it is green. Nothing else I can do. – Gerard Jun 22 '17 at 18:38 — Gerard, Jun 22 '17 at 18:38

score 0 · Answer 2 · answered Jun 22 '17 at 18:31

It's because you have .search-label, .search-input after the .search-input{ background-color:#32CD32; } is stated. CSS, Cascading Style Sheets, read top to bottom, so since the .search-label, .search-input is after, it reads that, overriding the previous statement and making the background gray. The comma you have between .search-label, .search-input means it is applying those styles to each one.

If you just move the order that they are called in, it will work just fine.

score 0 · Answer 3 · answered Jun 22 '17 at 18:35

The issue is that the .search-input background color is edited by the .search-label, .search-input descriptior, which is undoing your work!

.search-input {
      transform: translateY(-100%);
      opacity: 0;
      position: absolute;
      top: 100%;
      transition: opacity .25s, transform .25s;
      left: 0;
      z-index: -2;
      border: 1;
      outline: 0;
      background-color:#32CD32;
    }

.search-label, .search-input {
      //background: #ccc; //This can be deleted, as it is undoing your work
      padding: .5em;
      display: inline-block;
 }

.clicked + .search-input {
      opacity: 1;
      width: 200px;
      background-color:#32CD32;
      transform: translateY(0);
 }

JSFIDDLE

how to style a search box

3 Answers3