如何更改仅使用CSS选项的间距？

vatpfxk5 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(200)

我有一个使用select/option的下拉列表，但是我有一个变体，在select标签之前有一个带有图标的span，所以我必须为select添加一个填充来“推送”占位符，以便适合图标和文本，但是当我打开select时，选项也会获得该填充。当我打开下拉菜单时，如何只设置选项的样式以删除此填充？我尝试在CSS中为选项添加一个padding，但是option属性不支持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>

css

来源：https://stackoverflow.com/questions/76535152/how-to-change-the-spacing-of-the-options-of-a-select-using-css-only

2条答案

按热度按时间

ev7lccsx1#

您可以简单地将包含您的图标和select的img放在 Package 器div中，并从select中删除所有边框和轮廓，以便整个div看起来像一个下拉列表。不需要填充。检查下面的代码片段。

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

.icon {
  width: 16px;
  height: 16px;
  background-image: url("https://picsum.photos/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>

赞(0）回复(0）举报 2023-06-25

6tr1vspr2#

要使用CSS更改元素中选项的间距，可以使用padding属性。下面是一个例子：
“CSS”
select { padding-top: 10px; /* Adjust the top padding as desired */ padding-bottom: 10px; /* Adjust the bottom padding as desired */ }
在上面的CSS代码中，padding-top和padding-bottom属性用于控制元素中选项的间距。通过调整这些值，可以增大或减小选项之间的垂直间距。您可以随意修改这些值以满足您的特定要求。

赞(0）回复(0）举报 2023-06-25

我来回答

如何更改仅使用CSS选项的间距？

2条答案

相关问题

热门标签

最新问答