www.w3schools.com/howto/howto_js_active_element.asp

---

Active Button

Highlight the active/current (pressed) button.

---

Pure JavaScript custom select dropdowns - Codepen

---

CSS only Select - CodePen

---

Select element styling CSS3 Only - Codepen

---

Custom select no BS or JQ - Codepen

---

select javascript - Codepen

---

html select custom design - Codepen

---

Pure CSS Select Dropdown (styled, animated) - CodePen

---

---

codepen.io/WebDevSimplified/pen/NLmgdw

Custom Radio Buttons

One Two Three Four

---

CODE:

<style>
.radio {
  margin: 0.5rem;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type=radio]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}
.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}
</style>

<div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Checked</label>
  </div>

  <div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label  for="radio-2" class="radio-label">Unchecked</label>
  </div>

  <div class="radio">
    <input id="radio-3" name="radio" type="radio" disabled>
    <label for="radio-3" class="radio-label">Disabled</label>
  </div>

codepen.io/rauldronca/pen/EWLeMz

---

codepen.io/manabox/pen/raQmpL

---

codepen.io/Crisztiano/pen/gKjKNr

---

- Radio Button Cards Codepen

---

Toggle Switch

css-tricks.com/having-a-little-fun-with-custom-focus-styles/

---

---

---

---

---