如何设置 (css) 单选按钮和标签的样式?
-
09-06-2019 - |
题
给定下面的代码,如何将单选按钮设置为位于标签旁边,并将所选单选按钮的标签设置为与其他标签不同的样式?
<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="color" value="" id="SubmitQuestion" />
<input type="radio" name="color" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="color" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="color" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
另外让我声明一下,我使用 yui css 样式作为基础。如果您不熟悉它们,可以在这里找到它们:
他们的文档在这里: 雅虎!用户界面库
@pkaeding:谢谢。我尝试了一些漂浮的东西,看起来很混乱。样式活动单选按钮似乎可以通过谷歌搜索上的一些输入[type=radio]:活动提名来实现,但我没有让它正常工作。所以我想问题更多的是:这在当今所有现代浏览器上都是可能的吗?如果不可能,那么最少需要什么 JS?
解决方案
您问题的第一部分只需 HTML 和 CSS 即可解决;第二部分需要使用 Javascript。
让标签靠近单选按钮
我不确定你所说的“旁边”是什么意思:在同一条线上且靠近,还是在不同的线上?如果您希望所有单选按钮位于同一行,只需使用边距将它们分开即可。如果你想让他们每个人都有自己的线路,你有两个选择(除非你想冒险进入 float:
领土):
- 使用
<br />s
将选项分开并使用一些 CSS 来垂直对齐它们:
<style type='text/css'>
.input input
{
width: 20px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
- 跟随 分开的清单的文章: 更漂亮的无障碍表格
将样式应用到当前选定的标签 + 单选按钮
造型 <label>
这就是为什么你需要求助于 Javascript。像这样的图书馆 jQuery非常适合这个:
<style type='text/css'>
.input label.focused
{
background-color: #EEEEEE;
font-style: italic;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.input :radio').focus(updateSelectedStyle);
$('.input :radio').blur(updateSelectedStyle);
$('.input :radio').change(updateSelectedStyle);
})
function updateSelectedStyle() {
$('.input :radio').removeClass('focused').next().removeClass('focused');
$('.input :radio:checked').addClass('focused').next().addClass('focused');
}
</script>
这 focus
和 blur
需要挂钩才能在 IE 中实现此功能。
其他提示
这至少会让你的按钮和标签彼此相邻。我相信第二部分不能单独用 css 完成,需要 javascript。我发现一个页面也可能对您提供这部分的帮助,但我现在没有时间尝试: http://www.webmasterworld.com/forum83/6942.htm
<style type="text/css">
.input input {
float: left;
}
.input label {
margin: 5px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
不隶属于 StackOverflow