0

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

在此处输入图像描述

为此，我使用以下 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 很陌生。

4

3 回答 3

0

它应该是

.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/

于 2013-06-11T10:08:50.710 回答
0

试试这个：

<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>
于 2013-06-11T10:24:09.380 回答
0

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

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;
}
于 2013-06-11T11:10:45.077 回答