how style list of select menu html and css

Question

ok i have code like this html

            <div class="select_countries">
            <select name="region" id="countries">
                    <option value="none" selected disabled hidden>Filter by Region</option> 
                    <option value="all">All</option>
                    <option value="africa">Africa</option>
                    <option value="america">America</option>
                    <option value="asia">Asia</option>
                    <option value="europe">Europe</option>
                    <option value="oceania">Oceania</option>
            </select>
        </div>

i try on different ways to style list items and make gap between select menu and list items but i don't figure right way

[url=https://imge.to/i/5rw8i][img]https://b.imge.to/2019/07/20/5rw8i.jpg[/img][/url]

https://screenshot.net/dgp8of5

score 1 · Answer 1 · answered Jul 20 '19 at 13:56

1

You are very limited in how browsers will apply padding within a select but one workaround is to set the appearance: none; along with its vendor prefixes.

This then allows you to use padding to your heart's content as below:

select
{
    padding-bottom: 20px;
    border: 1px solid #979997;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

<div class="select_countries">
            <select name="region" id="countries">
                    <option value="none" selected disabled hidden>Filter by Region</option> 
                    <option value="all">All</option>
                    <option value="africa">Africa</option>
                    <option value="america">America</option>
                    <option value="asia">Asia</option>
                    <option value="europe">Europe</option>
                    <option value="oceania">Oceania</option>
            </select>
        </div>

answered Jul 20 '19 at 13:56

Mike Poole

1,958
5
29
41

i try but chrome ignore padding :) – aLEKSANDAR mILOSAVLJEVIC Jul 20 '19 at 14:16
It should work in Chrome. I just tested it in Chrome 75 and it works as desired. – Mike Poole Jul 20 '19 at 14:45
gives padding on select tag but not create gap between select and option value for me – aLEKSANDAR mILOSAVLJEVIC Jul 20 '19 at 15:05
I wrote the code based on the requirements that were specified. If you require other gaps you can add them in the same manner as I demonstrated. – Mike Poole Jul 22 '19 at 06:54

score 0 · Answer 2 · answered Jul 20 '19 at 13:46

There isn't much you can do to style the actual dropdown menu (besides bolding the options), you can only style the form field (how it looks before you click it and the dropdown shows)

if you want a custom dropdown menu, you can do a custom solution like the one here: https://components.fleeksite.com/select

I'm Limit · Answer 3 · 2019-07-20T14:08:10.100

W3Schools has example with HTML,JS,CSS here

DEMO FROM W3schools

(EDITED With edit make gap too)

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
      /*when an item is clicked, update the original select box,
      and the selected item:*/
      var y, i, k, s, h;
      s = this.parentNode.parentNode.getElementsByTagName("select")[0];
      h = this.parentNode.previousSibling;
      for (i = 0; i < s.length; i++) {
        if (s.options[i].innerHTML == this.innerHTML) {
          s.selectedIndex = i;
          h.innerHTML = this.innerHTML;
          y = this.parentNode.getElementsByClassName("same-as-selected");
          for (k = 0; k < y.length; k++) {
            y[k].removeAttribute("class");
          }
          this.setAttribute("class", "same-as-selected");
          break;
        }
      }
      h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
    /*when the select box is clicked, close any other select boxes,
    and open/close the current select box:*/
    e.stopPropagation();
    closeAllSelect(this);
    this.nextSibling.classList.toggle("select-hide");
    this.classList.toggle("select-arrow-active");
  });
}

function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

/*the container must be positioned relative:*/

.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none;
  /*hide original SELECT element:*/
}

.select-selected {
  background-color: #2d3945;
  border-radius: 2px;
}


/*style the arrow inside the select element:*/

.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}


/*point the arrow upwards when the select box is open (active):*/

.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}


/*style the items (options), including the selected item:*/

.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}


/*style items (options):*/

.select-items {
  position: absolute;
  background-color: #2d3945;
  top: 150%; /*Made Gap here*/
  left: 0;
  right: 0;
  z-index: 99;
  border: 1px solid rgba(61, 143, 253, 1);
}


/*hide the items when the select box is closed:*/

.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(61, 143, 253, 1);
}

<div class="custom-select" style="width:200px;">
  <select name="region" id="countries">
    <option value="none" selected disabled hidden>Filter by Region</option>
    <option value="all">All</option>
    <option value="africa">Africa</option>
    <option value="america">America</option>
    <option value="asia">Asia</option>
    <option value="europe">Europe</option>
    <option value="oceania">Oceania</option>
  </select>
</div>

how style list of select menu html and css

3 Answers3