樣式化HTML選擇和復選框

Question

這是小提琴。 我正在嘗試使用CSS設置<select>和<input id='checkbox'>樣式。 我目前正在使用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

編輯

我開始了一個項目，在此項目中我制作了自己無法樣式化的表單元素。 欲了解更多信息請參見該問題。

Answer 1

樣式復選框

樣式復選框在各個瀏覽器之間都是棘手且不一致的。 這是純CSS方法。 利用標簽和輸入的id=連接時，單擊標簽可激活輸入框本身。 那里不需要JavaScript。

的HTML

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

CSS隱藏復選框，根據需要設置<span>樣式。 我在這里使用了CSS Sprite。

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;
}

選擇輸入樣式

我還沒有找到一個簡單的解決方案。 這是一篇有關駭客的文章，似乎很不錯。

Answer 2

鑒於每種瀏覽器在輸入元素樣式方面都有自己的規則和例外，我傾向於使用http://uniformjs.com/之類的東西來實現一致的輸入樣式。 在具有數千個輸入元素的頁面上放慢速度，但是在其他方面卻非常出色。

Answer 3

您不能設置所有表單元素的樣式。 瀏覽器往往不允許您設置復選框的樣式和選擇框（以及下拉菜單，單選按鈕，文件上傳等）。 我之前使用的一般概念是隱藏實際元素，並使用替換元素（例如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;
}

Answer 4

想想在框中，當您在瀏覽器中查看時，填充的選擇似乎有多少框...

很多 ，並且它們具有很多相關的樣式/腳本（背景/顏色，填充，打開/關閉等功能）。

而實際上你看不到任何東西在你的代碼

所以代碼只能來自瀏覽器

和瀏覽器不同 ，所有答案都是正確的，請勿嘗試設置其樣式，而應由JavaScript替換元素和功能。