html - on change css selector for select element

Question

I have created a select box with custom css but the problem is that i want to make the custom arrow to downwards once you select it, so right now if i select any option the arrow will be upward, after selection if i click outside only it comes to default downward position.

Since i am using focus this issue comes, what is the better selector so that user clicks on select box it will be upward and once he selects it comes to normal downwards

see the sample snippet

.select {
  width: 40%;
  height: 50px;
  border: 0;
  border-left: 1px solid rgba(112, 112, 112, 0.1);
  background: transparent;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  color: green;
  background-color: #32a8a6;
  border-radius: 2px;
  background-position: calc(100% - 20px) calc(1em + 7px),
    calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  font-family: ProximaNova, Arial, Helvetica Neue, sans-serif;
}

.select:focus {
  background-image: linear-gradient(45deg, grey 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, grey 50%);
  background-position: calc(100% - 15px) 23px, calc(100% - 20px) 23px,
    calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}

.select:-moz-focus {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

<select class='select'>
 <option>one</option>
 <option>two</option>
</select>

标签： htmlcss

Answer 1

Try replacing .select:focus with .select:focus:active

.select {
  width: 40%;
  height: 50px;
  border: 0;
  border-left: 1px solid rgba(112, 112, 112, 0.1);
  background: transparent;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  padding-left: 15px;
  color: green;
  background-color: #32a8a6;
  border-radius: 2px;
  background-position: calc(100% - 20px) calc(1em + 7px),
    calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  font-family: ProximaNova, Arial, Helvetica Neue, sans-serif;
}

.select:focus:active {
  background-image: linear-gradient(45deg, grey 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, grey 50%);
  background-position: calc(100% - 15px) 23px, calc(100% - 20px) 23px,
    calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}

.select:-moz-focus {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

<select class='select'>
 <option>one</option>
 <option>two</option>
</select>