javascript - 与文本内联的复选框 - JS 问题？

Question

我目前正在学习如何编程，但一直无法完成表单的设计。我已经查看了之前的所有问题，但似乎没有一个解决方案有效:S。以下是我要修复的两件事:

1. 更改下拉菜单的文本颜色和边框。
2. 将复选框和标签对齐，使它们在同一行。

代码可以在这里看到:http://codepen.io/jbender90/pen/rebbEB

这是我当前的复选框和标签设置:

<div id="menu">
    <select class="js-example-basic-single" style="width: 100%;">

#menu{
    font-family: montserrat, arial, verdana;
    font-size:14px;
    border: #2C3E50;
    color:#2C3E50;
    text-align: left;
    height: 20px;
}

这是我当前的复选框和标签设置:

<div class="inline-field">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Remember me</label>
</div>

.inline-field input,
.inline-field label {
    display: inline-block !important;
    float:left;
    margin-bottom: 0; /* I added this after I posted my reply */
    vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
    z-index:1;
}

我们将张开双臂欢迎任何建议!

干杯，

约翰

Answer 1

要执行#1，您只需针对下拉列表的类来修改属性，因此对于下拉边框颜色和文本，您将拥有这两个选择器类:

.select2-dropdown {
  border-color: yellow;
}

.select2-results__option {
  color: red;
}

这在您的代码笔中可能不起作用，因为您在主体中再次包含了 select 2 css，这将覆盖您在 style.css 中定义的任何内容。

至于 #2，似乎有些东西将复选框的宽度设置为 100%，从而下推了标签。我所做的另一个更改是将输入包装在标签中。 html 看起来像这样:

<label for="checkbox"><input type="checkbox" id="checkbox"> This text should be aligned with the checkbox</label>

覆盖宽度:

#msform input {
  width: auto;
}

这是工作示例。

http://codepen.io/anon/pen/vGMqLv