Question

我正在学习如何编程并且一直试图完成表单的设计。我看过以前的所有问题，但没有一个解决方案似乎有效：S。以下是我想要解决的两件事：

更改下拉菜单的文字颜色和边框。
对齐复选框和标签，使它们位于同一行。

可在此处查看代码：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;
}

这可能在你的代码笔中不起作用，因为你已经在body中包含了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

Checkbox内嵌文本 - JS问题？

1 个答案: