4

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

我想实现这一点的原因是，在我的情况下，用户必须在 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
____________________________

我真的希望你能明白我的意思:)

4

5 回答 5

3

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

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/

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

于 2013-06-14T07:48:18.437 回答
2

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

这个想法是：

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

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

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

干杯

于 2013-06-14T07:27:57.700 回答
1

我之前实际上已经写过这个，并做了一个 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);
};

我希望这能给你带来你所追求的。

于 2013-06-14T07:50:10.687 回答
0

试试这个

单选按钮 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;
            }
于 2013-06-14T08:18:29.150 回答
-2

感谢你们所有人的帮助（以及这个很棒的答案）。我终于可以在我的网站上实现它了。

这是我的代码：

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;
}
于 2013-06-14T12:03:22.003 回答