Question

我想自定义单选按钮，使它们如下所示：

enter image description here

为实现这一目标，我使用以下css和html

HTML：

<div class="buttonSlider">
    <input type="radio" value=".."></input>
    <input type="radio" value=".."></input>
    <input type="radio" value=".."></input>
</div>

CSS：

.buttonSlider {
    font-size: 250%;
    background: #ccffdd;
}

.buttonSlider input[type="radio"] { /* don't show the radio check items */
    display: none;
}

.buttonSlider label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}

.buttonSlider input[type="radio"]:checked + .buttonSlider label { 
    background-color:#bbb;
}

但是，当我将此css应用于单选按钮时，按钮不可见。

有人可以帮助并向我详细解释他/她的解释吗？我对css很新。

Answer 1

应该是

.buttonSlider input[type="radio"]:checked + label { 
   background-color:#bbb;
}

你正在做display:none;

.buttonSlider input[type="radio"] { /* don't show the radio check items */
  display: none;
}

所以你也需要删除它。

请看这个：

http://jsfiddle.net/JSWorld/zCBBf/

Answer 2

试试这个：

<head >
    <title></title>

    <style>
        .buttonSlider 
        {
        background-color: #800001;
        }
        .buttonSlider .radiobox
        {
            height: 20px;
            width: 100px;
            border: 1px solid black;
            background-color: #800001;
            float: left;
        }
        .buttonSlider input
        {
            display: none;
        }
    </style>


    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('.buttonSlider input').replaceWith('<div class="radiobox"> <input type="radio" name="radio1" value=".."/></div>');
            $('.buttonSlider input').prop('checked', false);
            $('.radiobox').click(function () {
                var this_div = $(this);
                if (this_div.find('input').is(':checked')) {
                    this_div.find('input').prop('checked', false);
                    this_div.css({ 'background-color': '#800001' });
                }
                else {
                    this_div.find('input').prop('checked', true);
                    this_div.css({ 'background-color': '#808080' });
                }

            })
        })
    </script>
</head>
<body>
    <div class="buttonSlider">
        <input type="radio" value=".." name="radio1" />
        <input type="radio" value=".." name="radio1" />
        <input type="radio" value=".." name="radio1" />
    </div>
</body>
</html>

Answer 3

以下是没有复选框的工作示例。也许有帮助

http://jsfiddle.net/zCBBf/1/

.radio-box
{
background-color:black;
height:53px;
width:535px;
padding:4px;
}

.radio-box label {    
  display:inline-block;
  background-color:#ddd;
  padding:17px 60px;
  font-family:Arial;
  font-size:16px;
}
input[type="radio"] {
  display:none;
}

.radio-box input[type="radio"]:checked + label{ 
  background-color:red;
}

自定义单选按钮不可见

3 个答案: