Question 192550 in CSS Question posted in
Some basic documentation can be found here.

How to change the spacing of the options of a select using CSS only?

I have a dropdown using select/option, but I have a variant that have a span with an icon before the select tag, so I have to add a padding for the select to ‘push’ the placeholder in order to fit the icon and the text, but when I open the select, the options get that padding too. How to style only the options to remove this padding when I open the dropdown? I tried to add a padding to the option in CSS, but the option attribute doesn’t work with padding.

.select-wrapper {
  position: relative;
  display: inline-block;
}

.icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("icon.png");
  background-size: cover;
}

select {
  appearance: none;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  padding-left: 32px; 
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="select-wrapper">
    <span class="icon"></span>
    <select>
      <option disabled selected hidden>Choose an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    To change the spacing of the options in a element using CSS, you can use the padding property. Here’s an example:

    "CSS"

    select { padding-top: 10px; /* Adjust the top padding as desired */ padding-bottom: 10px; /* Adjust the bottom padding as desired */ }

    In the above CSS code, the padding-top and padding-bottom properties are used to control the spacing of the options within the element. By adjusting the values, you can increase or decrease the vertical spacing between the options. Feel free to modify the values to suit your specific requirements.

    Login or Signup to reply.
  2. 0

    You can simply have an img that contains your icon and select inside a wrapper div and remove all border and outline from select, so that whole div appears like a drop-down. No need for padding. Check the below code snippet.

    .select-wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.icon {
  width: 16px;
  height: 16px;
  background-image: url("https://picsum.com/500");
  background-size: cover;
}

select {
  border: none;
  outline: none;
  font-size: 16px;
  width: 200px;
}
    <body>
  <div class="select-wrapper">
    <img class="icon" />
    <select>
      <option disabled selected hidden>Choose an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search