内联文本复选框-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