CODEWITHSUNDEEP
htmlcss
Beginner
Beginner

Reputation: 9105

on change css selector for select element

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>

Upvotes: 1

Views: 854

Answers (2)

cjl750
cjl750

Reputation: 4629

You can use the :active pseudo class instead.

Since it can be hard to see the arrow direction in the example below when the options are showing, I've changed the background color instead to demonstrate the effect.

.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:active {
  background-color: red;
}
<select class='select'>
 <option>one</option>
 <option>two</option>
</select>

Upvotes: 1

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9938

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>

Upvotes: 1

Related Questions