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

Checkbox inline with text - JS issue?

本文关键字：-JS 问题 文本 复选框      更新时间：2023-09-26

我目前正在学习如何编程，一直在努力完成表单的设计。我已经看了以前的所有问题，但似乎没有一个解决方案有效：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;
}

任何建议都将受到热烈欢迎！

干杯，

Johan

要做#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

相关文章：