將單選按鈕造型爲正方形

Question

我被賦予了一個帶方形單選按鈕的設計。

有沒有一種辦法風格單選按鈕，看起來像這樣？

唯一的辦法，我想我可以做到這一點是通過使用圖像，並通過$.on('click')方法交換檢查/檢查狀態。

Answer 1

你不需要設計一個單選按鈕。只需使用一個div：

例如，在小提琴：http://jsfiddle.net/kLGf4/2/

HTML：

<section> 
    <header> 
     <h1>Perfered Method of Contact</h1> 

    </header> 
    <div> <span>Choice 1</span> 

     <div class="square-radio square-radio--clicked"> 
      <div class="square-radio--content"></div> 
     </div> 
    </div> 
    <div> <span>Choice 2</span> 

     <div class="square-radio"> 
      <div class="square-radio--content"></div> 
     </div> 
    </div> 
</section> 

CSS：

.square-radio { 
    border: 1px solid black; 
    margin: 2px; 
    width: 40px; 
    height: 40px; 
    position: relative; 

} 
.square-radio--clicked .square-radio--content{ 
    margin: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background-color: black; 
    width: 20px; 
    height: 20px; 
} 

JS：

$(document).ready(function() { 
    $(document).on("click", ".square-radio", function() { 
     $(this).toggleClass("square-radio--clicked"); 
    }); 
}); 

Answer 2

試試這個：

HTML：

<label class="active"> 
    Email 
    <span></span> 
    <input type="radio" name="n1" value="email" checked /> 
</label> 
<label> 
    Phone 
    <span></span> 
    <input type="radio" name="n1" value="phone" /> 
</label> 

CSS：

label { 
    width: 125px; 
    display: block; 
    float: left; 
} 
label input { 
    display: none; 
} 
label span { 
    display: block; 
    width: 17px; 
    height: 17px; 
    border: 1px solid black; 
    float: left; 
    margin: 0 5px 0 0; 
    position: relative; 
} 
label.active span:after { 
    content: " "; 
    position: absolute; 
    left: 3px; 
    right: 3px; 
    top: 3px; 
    bottom: 3px; 
    background: black; 
} 

JS（需要的jQuery）：

$(document).ready(function() { 
    $('label').click(function() { 
     $('.active').removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 

這裏是一個小提琴，你可以看到它在行動：http://jsfiddle.net/wqdHE/2/

Answer 3

這可以完成使用純CSS。只需向收音機輸入添加一個標籤，然後改爲 。

/*Hide the radio button:*/ 
 
input { 
 
    display: none; 
 
} 
 

 

 
/*Then, style the label so it looks like however you want:*/ 
 
label { 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 2; 
 
    border: 3px #3a3a3a solid; 
 
    display: block; 
 
    line-height: 22px; 
 
    text-align: center; 
 
    color: black; 
 
    font-size: 40pt; 
 
    cursor: pointer; 
 
    background: white; 
 
    position: relative; 
 
} 
 

 
input:checked+label:before { 
 
    opacity: 1; 
 
} 
 

 
label:before { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    height: 15px; 
 
    width: 15px; 
 
    background: #3a3a3a; 
 
    content: ''; 
 
    opacity: 0; 
 
}

<input type="radio" name="radio" id="radio"> 
 
<label for="radio"></label> 
 
<input type="radio" name="radio" id="radio2"> 
 
<label for="radio2"></label> 
 
<input type="radio" name="radio" id="radio3"> 
 
<label for="radio3"></label>

JSFiddle Demo

Answer 4

這是我知道的最簡單的，不需要標籤或腳本一個純CSS的解決方案。一對夫婦供應商前綴所需要的全兼容：

input[type='radio'] { 
    box-sizing: border-box; 
    appearance: none; 
    background: white; 
    outline: 2px solid #333; 
    border: 3px solid white; 
    width: 16px; 
    height: 16px; 
} 

input[type='radio']:checked { 
    background: #333; 
} 

正如上面提到的，box-sizing和appearance性質應該是供應商前綴：

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none;