0

这是小提琴。我正在尝试样式化<select>和<input id='checkbox'>使用 CSS。我目前正在使用select {background: #4a4a4a}它，它可以工作，但我无法使用任何其他样式。复选框样式在使用时根本不起作用input[type='checkbox'] {background: #4a4a4a}

HTML：

<select>
    <option>Hello</option>
    <option>Hola</option>
    <option>Bonjour</option>
</select>
<input type='checkbox'>

CSS：

body {
    background: #252525;
}
select {
    background: #4a4a4a;
    border-radius: 0px;
}
input[type='checkbox'] {
    background: #4a4a4a;
    border-radius: 0px;
}

JS：

none

编辑

我已经开始了一个项目，我正在制作自己的不可样式化的表单元素。有关更多信息，请参阅此问题。

4

4 回答 4

2

样式复选框

样式化复选框在浏览器中是棘手且不一致的。这是纯 CSS 方法。它利用了当 label 和 input 用 连接时id=，点击 label 会激活输入框本身。那里不需要 JavaScript。

HTML

<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text 
   <span class="checkbox"></span>
</label>

CSS 隐藏复选框，随意设置样式<span>。我在这里使用了 CSS 精灵。

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label .checkbox {
  display: inline-block;
  width: 22px;
  height: 19px;
  vertical-align: middle;
  background: url('ui-sprite.png') left -90px no-repeat;
  cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
  background: url('ui-sprite.png') -30px -90px no-repeat;
}


样式选择输入

我还没有找到一个简单的工作解决方案。 这是一篇关于 hack 的文章，似乎进展顺利。

于 2013-09-05T20:02:30.680 回答
1

考虑到每个浏览器在输入元素样式方面都有自己的规则和例外，我倾向于使用http://uniformjs.com/之类的东西来实现一致的输入样式。在具有数千个输入元素的页面上减慢速度，但在其他方面非常出色。

于 2013-09-02T16:54:20.670 回答
0

您不能设置所有表单元素的样式。浏览器往往不允许您设置复选框和选择框的样式（以及下拉菜单、收音机、文件上传等......）。我之前使用的一般概念是隐藏实际元素并使用诸如 div 之类的替换元素来显示给用户。该 div 的样式可以按照您想要的方式进行外观和工作。最容易错过的棘手部分是当用户与模拟元素交互时，您必须实际更改隐藏表单元素的状态。

这是一个将提供上述功能的JQuery 插件。编写此插件的目的是让用户根据需要对元素进行样式设置。这是一个示例JsFiddle，它演示了该插件并使用一些基本样式公开了 CSS 选择器。下面的基本代码...

HTML

<form>
  <select>
    <option>Hello</option>
    <option>Hola</option>
    <option>Bonjour</option>
  </select>
  <br/>
  <input type='checkbox'>
</form>

jQuery

$(document).ready(function () {
    $('body').styleMyForms();
});

CSS

 body {
     background: #252525;
 }
 .sf {
     position: relative;
     display: block;
     float: left;
 }
.sf-checkbox {
     top: 6px;
     margin-right: 5px;
     height: 15px;
     width: 15px;
     background: #fff;
     border: 1px solid #444;
     cursor: pointer;
     background: #4a4a4a;
     border-radius: 0px;
}
.sf-select {
     display: block;
     width: 220px;
     border: 1px solid #222;
     background: #4a4a4a;
     border-radius: 0px;
     padding: 0px 10px;
     text-decoration: none;
     color: #333;
     margin-bottom: 10px;
 }
.sf-select-wrap {
    position: relative;
    clear: both;
}
.sf-select-ul {
    background: #fff;
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    border: 1px solid #888;
    width: 240px;
    padding: 0px;
    top: 33px;
}
.sf-select-ul li {
     position: relative;
     cursor: pointer;
     padding: 0px 10px;
     color: #333;
 }
.sf-select-ul li:hover {
     background: #efefef;
 }
 .sf-select-ul li.selected {
    background: #508196;
    color: #fff;
 }
 .sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
     border-color: #222;
 }
 .sf-select:hover {
 }
 .sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus,      .sf-select:focus {
     background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
    background: #9cb7c3;
}
.clear {
    clear: both;
}
.buttonish {
    display: block;
    font-family:'Francois One', sans-serif;
    font-weight: normal;
    font-size: 2.8em;
    color: #fff;
    background: #9cb7c3;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    width: 480px;
    text-align: center;
    margin-top: 50px;
    text-shadow: 2px 2px 4px #508196;
    box-shadow: 2px 2px 4px #222;
}
于 2013-09-02T17:04:21.360 回答
0

想一想，当您在浏览器中查看填充的选择时，它似乎有多少个框......

很多，并且它们有很多相关的样式/脚本（背景/颜色、填充、功能打开/关闭等）

实际上，您在代码中看不到任何内容

所以代码只能来自浏览器

和浏览器不同，所有答案都是正确的，不要尝试设置样式，让 JavaScript 替换元素和功能。

于 2013-09-02T17:11:49.083 回答