0

I want to change the gray color to a black color on mouse hover as it is on the image:

enter image description here

But its not working properly, its working like this "https://jsfiddle.net/83vnj5ru/5/", the search input border is not treated as a whole, the placeholder text color is not changing on hover and the cursor pointer is not appearing on hover the Filter 1 and Filter 2 dropdowns. Do you know why?

.form-group {
  margin-bottom: 0 !important;
}

.input-group-text {
  color: gray;
}

.input-group-text:hover {
  color: black;
}

.filters {
  display: inline-block;
  color: gray;
  font-weight: bold;
}

.filters i {
  font-size: 1.1rem;
  color: gray;
  font-weight: bold;
}

.search-icon {
  background-color: #ffffff !important;
  border: 2px solid gray !important;
  border-right: 1px solid transparent !important;
}

.search-input {
  border-left: 1px solid transparent !important;
  border: 2px solid gray;
  color: gray;
}

.search-icon:hover {
  border-left: 1px solid transparent !important;
  border: 2px solid black;
}

.search-input:hover {
  border: 2px solid black;
}

.dropdown-toggle::after {
  display: none;
}
<div class="bg-custom-gray-dark">
  <div class="container py-5">
    <div class="row">
      <div class="col">
        <ul class="list-group">
          <li class="list-group-item bg-custom-light2 py-4">
            <div class="row align-items-center">
              <form class="col-5">
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
                    </div>
                    <input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
                  </div>
                </div>
              </form>

              <div class="col-7 text-right">
                <div class="dropdown filters mr-3">
                  <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Filter 1 <i class="fa fa-angle-down"></i>
                      </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                  </div>
                </div>
                <div class="dropdown filters">
                  <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Filter 2 <i class="fa fa-angle-down"></i>
                      </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
user10676579
  • 113
  • 7

1 Answers1

1

Use

.dropdown-toggle:hover{ color:black;}

See snippet below.

.form-group {
  margin-bottom: 0 !important;
}

.input-group-text {
  color: gray;
}

.input-group-text:hover {
  color: black;
}

.filters {
  display: inline-block;
  color: gray;
  font-weight: bold;
}

.filters i{
  font-size: 1.1rem;
  color: gray;
  font-weight: bold;
}


.search-icon {
  background-color: #ffffff !important;
  border: 2px solid gray !important;
  border-right: 1px solid transparent !important;
}

.search-input {
  border-left: 1px solid transparent !important;
  border: 2px solid gray;
  color: gray;
}

.search-icon:hover{
  border-left: 1px solid transparent !important;
  border: 2px solid black;

}
.search-input:hover{
  border: 2px solid black;
}

.dropdown-toggle::after {
  display: none;
  color:black;
}

.dropdown-toggle:hover{
  color:black;
}




input:hover::-webkit-input-placeholder {
    color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
    color: black;
}

input:hover::-moz-placeholder {
    color: black;
}

input:hover:-ms-input-placeholder {
    color: black;
}
HTML:

<div class="bg-custom-gray-dark">
  <div class="container py-5">
    <div class="row">
      <div class="col">
        <ul class="list-group">
          <li class="list-group-item bg-custom-light2 py-4">
            <div class="row align-items-center">
              <form class="col-5">
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
                    </div>
                    <input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
                           aria-describedby="emailHelp" placeholder="Search...">
                  </div>
                </div>
              </form>

              <div class="col-7 text-right">
                <div class="dropdown filters mr-3">
                  <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
                     aria-haspopup="true" aria-expanded="false">
                    Filter 1 <i class="fa fa-angle-down"></i>
                  </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                  </div>
                </div>
                <div class="dropdown filters">
                  <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
                     aria-haspopup="true" aria-expanded="false">
                    Filter 2 <i class="fa fa-angle-down"></i>
                  </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
Community
  • 1
  • 1
Wildchild
  • 195
  • 1
  • 5
  • 14
  • Thanks, but like that it seems that has the same issue, the search input and the search icon are not being treated as only 1 element but 2. – user10676579 Nov 23 '18 at 18:45
  • Updated the snippet. The placeholder css code is included now. – Wildchild Nov 23 '18 at 18:50
  • You can learn more about these tricks [here](https://css-tricks.com/almanac/selectors/p/placeholder/) – Wildchild Nov 23 '18 at 18:52
  • Thanks, but do you know how to have only 1 border that is the same for the elements "" and " " ? So that when the user hovers the input type text it appears only 1 border around these two elements? Because as it is in when the user hovers the input type text it appears a border only around the input type text but not around the icon font span, but it should apepar 1 border around the two elements. – user10676579 Nov 23 '18 at 19:26
  • @user10676579 the easiest way to do that is to put the two elements inside another element and apply the border to that parent element. Otherwise you'll always have to consider which sides of each element should have borders, also if you decide adding shadows, the end results would look weird. – Mihail Minkov Nov 23 '18 at 20:19