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

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

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

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 2

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

想法是：

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

由于固定在屏幕上，您的输入收音机将不再处于流动状态。
如果标签格式正确并链接到具有属性for 的主题，您只需单击标签即可检查您的不可见无线电输入。
要为您的表单设置样式，请不要介意那些输入，根据需要设置标签样式。

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

干杯

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;
}