複選框不適用於mac chrome

我正試圖在引導中使用複選框樣式。其中包括增加高度和寬度以及更改邊框。但運氣很好，我發現唯一的辦法就是使用-webkit。下面是代碼複選框不適用於mac chrome

input.largerCheckbox { 
 
    width: 30px; 
 
    height: 30px; 
 
    -webkit-transform: scale(1.3, 1.3); 
 
}

<input type="checkbox" class="largerCheckbox" name="checkBox">

在上面的代碼中，即使規模縮小的複選框更大的尺寸，我想。它只是扭曲或變形。 有沒有更好的辦法，還有邊界不起作用。有什麼建議麼？

注：我在手機像iPhone或Android

來源

2015-11-17 gates

的意思變了形的經典方式，風格複選框：

1-環繞你的複選框中的標記元素。

2 - 隱藏您的複選框

3 - 複選框，你將相應樣式後添加了新的元素。

我已經創建了一個高度和寬度大於默認值的複選框示例小提琴。 https://jsfiddle.net/vz3pgsbq/1/

您可以定義狀態未選擇使用此代碼：

[type="checkbox"]:not(:checked) + label::before, [type="checkbox"]:checked + label::before { 
    background: white none repeat scroll 0 0; 
    border: 1px solid #aaa; 
    content: ""; 
    height: 28px; 
    left: 0; 
    position: absolute; 
    top: 2px; 
    width: 28px; 
}

，並選中狀態：

[type="checkbox"]:not(:checked) + label::after, [type="checkbox"]:checked +  label::after { 
    color: #09ad7e; 
    content: "✔"; 
    font-size: 32px; 
    left: 4px; 
    line-height: 0.8; 
    position: absolute; 
    top: 3px; 
    transition: all 0.2s ease 0s; 
}

更多的例子和工具生成的複選框，可以在這個問題上可以找到：

How to style checkbox using CSS?

來源

2015-11-20 05:57:25 cesare

基本上你必須隱藏默認樣式並定義你自己的樣式。我不知道你想要什麼尺寸，但這應該做到這一點。只需改變尺寸即可滿足您的需求。

input.checkbox[type=checkbox] { 
 
\t width: 18px; 
 
\t height: 18px; 
 
\t text-indent: 2.5px; 
 
\t display:none !important; \t 
 
} 
 
input.checkbox[type=checkbox] + *:before { 
 
\t content: '\0020'; 
 
\t display: inline-block; 
 
\t width: 18px; 
 
\t height: 18px; 
 
\t vertical-align: middle; 
 
\t text-align: center; 
 
\t color: #0088EE; 
 
\t margin-right: 5px; 
 
\t background-color: #FFFFFF; 
 
\t border: 1px solid #C0C0C0; 
 
} 
 
input.checkbox[type=checkbox]:checked + *:before { 
 
\t content: '\2713'; 
 
\t font-size: 1.0625em; 
 
}

<input type='checkbox' class='checkbox' id='mycheckbox'/> 
 
<label for='mycheckbox'>Some Checkbox</label>

來源

2015-11-20 06:37:07 Gacci

<p> 
    <input type="checkbox" id="test1" /> 
    <label for="test1">Red</label> 
</p> 
<style> 
[type="checkbox"]:not(:checked), 
[type="checkbox"]:checked { 
    position: absolute; 
    left: -9999px; 
} 
[type="checkbox"]:not(:checked) + label, 
[type="checkbox"]:checked + label { 
    position: relative; 
    padding-left: 25px; 
    cursor: pointer; 
} 

[type="checkbox"]:not(:checked) + label:before, 
[type="checkbox"]:checked + label:before { 
    content: ''; 
    position: absolute; 
    left:0; top: 2px; 
    width: 17px; height: 17px; 
    border: 1px solid #aaa; 
    background: #f8f8f8; 
    border-radius: 3px; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3) 
} 
[type="checkbox"]:not(:checked) + label:after, 
[type="checkbox"]:checked + label:after { 
    content: '✔'; 
    position: absolute; 
    top: 3px; left: 4px; 
    font-size: 18px; 
    line-height: 0.8; 
    color: #09ad7e; 
    transition: all .2s; 
} 
[type="checkbox"]:not(:checked) + label:after { 
    opacity: 0; 
    transform: scale(0); 
} 
[type="checkbox"]:checked + label:after { 
    opacity: 1; 
    transform: scale(1); 
} 

[type="checkbox"]:disabled:not(:checked) + label:before, 
[type="checkbox"]:disabled:checked + label:before { 
    box-shadow: none; 
    border-color: #bbb; 
    background-color: #ddd; 
} 
[type="checkbox"]:disabled:checked + label:after { 
    color: #999; 
} 
[type="checkbox"]:disabled + label { 
    color: #aaa; 
} 

[type="checkbox"]:checked:focus + label:before, 
[type="checkbox"]:not(:checked):focus + label:before { 
    border: 1px dotted blue; 
} 


label:hover:before { 
    border: 1px solid #4778d9!important; 
} 

</style>

來源

2015-11-23 10:49:04

複選框不適用於mac chrome

回答

相關問題