How do I change the default style of the input[type= "radio" element on IOS and Android browsers?
Last Update:2016-02-22
Source: Internet
Author: User
<span id="Label3"></p><p><p>The default style on Safari is this way,</p></p><p><p>The background color can be used <code>background-color</code> to change, but the middle point is never removed.</p></p><p><p>I checked some <code>jQuery</code> plug-ins, such as <code>iCheck.js</code> , but that the description is written I do not understand, at all do not know how to Use.</p></p><p><p>There is also a <code>-webkit-appearance:none;</code> property that <code>input[type="radio"]</code> hides the element directly.</p></p><p><p>How should I change it? My goal is only a circle with a solid color when selected, and a transparent circle with a border when Unchecked.</p></p><p><p></p></p><p><p>You can also write using CSS Pseudo-class</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">H3</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>CSS3 Custom Radio<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">H3</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "radio"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "radio"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">value</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "1"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "sex"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "radio1"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">checked</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">label</span></span><span style="color: #ff0000;"><span style="color: #ff0000;"></span> for</span><span style="color: #0000ff;"><span style="color: #0000ff;">= "radio1"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Man<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">label</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">BR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "radio"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">value</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "0"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "sex"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "radio2"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">label</span></span><span style="color: #ff0000;"><span style="color: #ff0000;"></span> for</span><span style="color: #0000ff;"><span style="color: #0000ff;">= "radio2"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Woman<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">label</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><pre><span style="color: #000000;"><span style="color: #000000;">label {cursor:pointer; Display:inline</span></span>-<span style="color: #000000;"><span style="color: #000000;">block; Font</span></span>-<span style="color: #000000;"><span style="color: #000000;">size:13px; Margin</span></span>-<span style="color: #000000;"><span style="color: #000000;">right:15px; Padding</span></span>-<span style="color: #000000;"><span style="color: #000000;">left:25px; position:relative;} Input[type</span></span>= "radio"<span style="color: #000000;"><span style="color: #000000;">] {display:none;} Label:before {background</span></span>-<span style="color: #000000;"><span style="color: #000000;">color: #a06b63; bottom:1px; Box</span></span>-shadow:0 2px 3px 0 rgba (0, 0, 0, 0.3) inset, 0 1px 0 0 rgba (255, 255, 255, 0.8<span style="color: #000000;"><span style="color: #000000;">); Content:</span></span>""<span style="color: #000000;"><span style="color: #000000;">; Display:inline</span></span>-<span style="color: #000000;"><span style="color: #000000;">block; height:16px; Left:</span></span>0<span style="color: #000000;"><span style="color: #000000;">; Margin</span></span>-<span style="color: #000000;"><span style="color: #000000;">right:10px; position:absolute; Width:16px;}. Radio Label:before {border</span></span>-<span style="color: #000000;"><span style="color: #000000;">radius:8px;} Input[type</span></span>= "radio"]:checked +<span style="color: #000000;"><span style="color: #000000;">Label:before {color: #f3f3f3; Content:</span></span>"•"<span style="color: #000000;"><span style="color: #000000;">; Font</span></span>-<span style="color: #000000;"><span style="color: #000000;">size:30px; </span>line</span>-<span style="color: #000000;"><span style="color: #000000;">height:18px; Text</span></span>-<span style="color: #000000;"><span style="color: #000000;">align:center;}</span></span></pre><p><p>Address: https://jsfiddle.net/chic/q2t1z17a/</p></p><p><p>How do I change the default style of the input[type= "radio" element on IOS and Android browsers?</p></p></span>
