CODEWITHSUNDEEP
htmlcss
m_bale
m_bale

Reputation: 205

Change the border color of the select input for focus

I can't seem to change the focus color of my select input, I'm pretty confused as to what I should override.

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.forma #kome {
  border-color: #8e8e8e;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  text-align-last: center;
  cursor: pointer;
  color: #000000;
  -webkit-appearance: none;
  background: transparent url("http://icons.iconarchive.com/icons/mahm0udwally/all-flat/16/User-icon.png") no-repeat 15px center;
}

.forma select :focus {
  border-color: #2a6dc9 !important;
}
<form class="center-block forma" action="" method="post">
  <div class="form-group">
    <select class="form-control" id="kome" name="kome">
            <option value=" disabled selected ">Choose</option>
            <option value="smth"> smth </option>
            <option value="smth2"> smth2 </option>
        </select>
  </div>
</form>

Upvotes: 1

Views: 24809

Answers (3)

Rod_R
Rod_R

Reputation: 77

This worked for me with chrome, by changing the border-style to insset, and then whatever outline-color you want. It does not change the focus color on the options, but it does at least change the focus color when you tab to it.

select {
   border-style: inset;
   outline-color: orange;
}

Upvotes: 4

Nakous Mus
Nakous Mus

Reputation: 15

to style select child on focus :

change 

.forma select :focus{
    border-color: #2a6dc9 !important;
}

with

.forma option:hover{
    border: 1px solid red ;
}

Upvotes: 0

dfsq
dfsq

Reputation: 193261

There should be no space between select and :focus selectors. Space denotes parent-child relationship, i.e. "focused child of select". While select:focus means AND: focused select.

.forma select:focus {
    border-color: #2a6dc9 !important;
}

Upvotes: 6

Related Questions