Question

是否可以在每个元素前面创建没有圆形按钮的单选按钮组？

我想实现这一点的原因是，在我的情况下，用户必须在3种不同语言之间进行选择，我真的想将此选择添加到<form>标签，更改所选颜色语言并使它required，但同时我希望它看起来像这样：

___________________________
| Username                 |     <--Text input
___________________________    
___________________________
| Password                 |     <--Text input
___________________________
____________________________   
|   EN   |   DE   |   FR   |     <--This is what I thought of... Horizontal selection
____________________________        of the language looking like a simple table with
                                    3 rows and the plain text (EN, DE, FR) in it.
____________________________
| Login                    |     <--Submit button
____________________________

我真的希望你能得到我的观点：）

Answer 1

是和否。
如果您使用输入和标签构建表单，则会执行，否则，执行你必须。 :)

这个想法是：

input[type=radio] {
   position:fixed;
   left:-9999px;
}

由于固定和屏幕不再，您的输入广播将不再在流程中如果标签格式正确并链接到带有属性for的主题，您只需要使用标签来检查您的隐形无线电输入。
为了塑造你的形式，不要介意那些影片，根据自己的喜好设计你的标签

<input type="radio" name="r-lang" id="r1"><label for="r1"> EN </label>

干杯

Answer 2

如果将单选按钮放在标签内，然后使其不可见，则用户可以单击标签以选择其中的单选按钮。请考虑以下方法。

HTML：

<div>
    <label><input type="radio"/>English</label>
    <label><input type="radio"/>French</label>
</div>

CSS：

label > input[type=radio] {
    visibility: hidden;
}

JSFiddle：http://jsfiddle.net/gEXUT/

请注意，这只是一个示例，您仍然需要添加广播组名称，也许还需要添加德语等选项。

Answer 3

我之前已经写过这个，并且做了一个jsfiddle例子：

http://jsfiddle.net/Kyle_Sevenoaks/HzQBE/

我会解释一下。（我已将标签的单选按钮放入此示例的列表中）

 <li class="cardtype-item">
        <input type="radio" name="preferred_color" id="red" value="Red" /> 
        <label for="red"> Red</label>
 </li>

一般的想法是，您有标签链接到单选按钮，但无线电是隐藏的（通过display，position等）。然后使用CSS完全按照您的喜好设置标签样式，并且因为它们链接到单选按钮（通过输入上的"name"和标签上的"for"），您可以更好地控制他们看起来如何。

li
{
    background: #333;
    color: #eee;
    padding: 10px;
    list-style-type: none;
    float: left;
    width: 100px;
}

li.selected
{
    background: #eee;
    color: #333;
    box-shadow:inset 0px 0px 15px #999;
}

input[type=radio]
{
    display: none;
}

下一部分技巧是使用Javascript（我使用jQuery）添加和删除标签本身的选定或活动类。

$('li.cardtype-item label, li.cardtype-item input').click( function() {
    $(this).parents('li').addClass('selected');
        $(this).parents().siblings('li').removeClass('selected');
});

var ident = $('input[type=radio]').attr("id");

if($('input[type=radio]').is('checked')) {
    $('form').append(ident);
};

我希望这能为你提供很多你想要的东西。

Answer 4

试试这个

单选按钮html

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

的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' });
                }

            })
        })

CSS

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

Answer 5

感谢大家的帮助（以及this精彩的回答）。我终于可以在我的网站上实现它了。

这是我的代码：

HTML：

<div id="language">
       <table id="languagetable" border="0px" cellspacing="0px">
              <tr>
                     <td width="33.33333%">
                             <input type="radio" id="fr" name="languageselection" value="en">
                             <label for="en">FR</label>
                      </td>
                      <td width="33.33333%">
                             <input type="radio" id="en" name="languageselection" value="de" checked>
                             <label for="de">EN</label>
                      </td>
                      <td width="33.33333%">
                             <input type="radio" id="it" name="languageselection" value="it">
                             <label for="de">DE</label>
                      </td>
              </tr>
       </table>
</div>

CSS：

#languagetable input[type="radio"] {
    display:none; 
}

#languagetable label {
    display:inline-block;
    margin: 0 auto;
    font-family: Arial;
    font-size: 20px;
}

#languagetable input[type="radio"]:checked + label { 
    color: #99CC00;
}

创建一个没有单选按钮和自定义CSS样式的单选按钮组

5 个答案: