Question

这就是我的代码：

<select>
  <option>
    PRODUCT CATALOUGE
  </option>

  <option>
    VACUUM COMPONENTS
  </option>

  <option>
    VALVE COMPONENTS
  </option>

  <option>
    ROUGHING COMPONENTS
  </option>

  <option>
    VACUUM MEASUREMENT
  </option>

  <option>
    GLASS COMPONENTS
  </option>

  <option>
    ELECTRICAL FEEDTHROUGHS
  </option>

  <option>
    MOTION AND MANIPULATION
  </option>

  <option>
    THIN FILM PRODUCTS
  </option>
</select>

这里有我的CSS：

select { 
  margin: 10px;
  padding: 10px; 

  width: 220px;
  text-indent: 27px;
  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;

  position:absolute; top: 10%; left: 2%;
}

这段代码实际上工作正常，但我想使用select选项创建一个新的下拉列表，但我想以不同的方式设置它。我尝试使用div标签并在外部样式表中设置ID，但这并不起作用。我该如何设计特定的选择功能？

e.g。 #select还是我需要使用课程？

Answer 1

我会说使用类，如果你需要另一个具有相同外观的select，它们可以再次使用。

使用类的另一个重要原因是您可以在层中应用它们，因为您可以将多个类应用于任何元素。例如，

让我们看看按钮，例如。假设我们希望所有按钮的字体大小为16像素，但我们希望按钮的背景颜色根据按钮的使用位置而有所不同。我们可以根据需要创建一些类并将它们分层，以应用所需的样式。

HTML
<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>
CSS

.btn {
     font-size: 16px;
}
.btn-danger {
    background: red;
}
.btn-success {
    background: green;
}

在这里你可以看到两个锚元素，它们都有多个类属性值。第一个类btn用于为每个元素应用16像素的字体大小。然后，第一个锚元素使用另一类btn-danger来应用红色背景颜色，而第二个锚元素使用另一类btn-success来应用绿色背景颜色。我们的风格清洁，模块化。

multiple classes - learn.shayhowe.com

至于你的问题，你可以这样做，

HTML

<select class='my-select-1'>
    <option>....</option>
    .....................
</select>

<select class='my-select-2'>
    <option>....</option>
    .....................
</select>

CSS

.my-select-1 {
    /* properties for first select */
}

.my-select-2 {
    /* properties for second select */
}

Answer 2

<select id="one">
  <option>
    PRODUCT CATALOUGE
  </option>

  ...

  <option>
    THIN FILM PRODUCTS
  </option>
</select>

<select id="two">
  <option>
    PRODUCT CATALOUGE
  </option>

  ...

  <option>
    THIN FILM PRODUCTS
  </option>
</select>

这是一个工作小提琴： https://jsfiddle.net/e63fzbkt/

您也可以使用类而不是ID。

Answer 3

#menu1 { 
  margin: 10px;
  padding: 10px; 

  width: 220px;
  text-indent: 27px;
  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;

  position:absolute; top: 10%; left: 2%;
}
#menu2 { 
  margin: 10px;
  padding: 10px; 

  width: 220px;
  text-indent: 27px;
  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;

  position:absolute; top: 10%; left: 2%;
}

首先使用id menu1，第二个选择标签使用menu2表示为每个选择标签提供ID

如何在HTML中设置特定选择选项的样式

3 个答案: