html - 风格化输入选择[选项旁边的选项]

Question

我尝试使用 CSS 来设置 HTML 代码的样式。 我需要将它的样式设置为类似于复选框的切换开关。 不幸的是，需要保留输入类型选择。

这是可能的，还是我必须更改为复选框并对其进行样式化？ 我以前从未使用过 CSS，我不知道从哪里开始。当前代码:

CSS:

<style>

input[type=submit] {
    width: 50%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


label, input[type=submit] {
display: block;
}
div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>

HTML；

<h3>Using CSS to style an HTML Form</h3>

<div>
  <form>
    <label for="decision">decision</label>
    <select id="decision" name="decision">
      <option value="true">true</option>
      <option value="false">false</option>
    </select>

    <input type="submit" value="Submit">
  </form>
</div>

有没有人有想法？

Answer 1

在 CSS 中，您可以通过(以及其他)标记名/类/id 定位不同的元素。 在您的情况下，我建议您通过 id 来定位您的选择元素:

#decision {
    /* style goes here */
}

在这里您可以使用与选择元素兼容的任何样式。

我建议你看看a guide for selectors , 让您了解如何继续。 祝你好运!