当前位置:  开发笔记 > 编程语言 > 正文

如何设置样式(css)单选按钮和标签?

如何解决《如何设置样式(css)单选按钮和标签?》经验,为你挑选了3个好方法。

鉴于下面的代码,我如何设置单选按钮的样式,并将所选单选按钮的标签设置为与其他标签不同?




What color is the sky?

另外,让我说明我使用yui css样式作为基础.如果你不熟悉他们,可以在这里找到:

复位字体,grids.css

基min.css

这里有他们的文档:Yahoo!UI库

@pkaeding:谢谢.我尝试了一些漂浮的东西,只是看起来搞砸了.样式活动单选按钮似乎可以使用一些输入[type = radio]:谷歌搜索上的主动提名,但我没有让它正常工作.所以我想的问题更多:这在今天的所有现代浏览器中是否可行,如果不是,那么最小的JS需要什么?



1> Chris Zwiryk..:

您只需使用HTML和CSS即可解决问题的第一部分; 你需要在第二部分使用Javascript.

在单选按钮附近获取标签

我不确定你的意思是"旁边":在同一条线上和附近,还是在不同的线上?如果您想要同一行上的所有单选按钮,只需使用边距将它们分开.如果你想让它们各自独立,你有两个选择(除非你想进入float:领土)​​:

使用
s
分割开的选项和一些CSS来垂直对齐它们:


What color is the sky?

按照A List Apart的文章:更漂亮的可访问表格

将样式应用于当前选定的标签+单选按钮

造型就是为什么你需要诉诸Javascript.像jQuery这样的库 是完美的:




focusblur钩子需要作出IE这项工作.



2> Henrik Gusta..:

对于任何支持CSS3的浏览器,您可以使用相邻的兄弟选择器来标记样式

input:checked + label {
    color: white;
}  

MDN的浏览器兼容性表格基本上表示所有当前流行的浏览器(Chrome,IE,Firefox,Safari)在桌面和移动设备上都是兼容的.



3> pkaeding..:

这将使您的按钮和标签至少彼此相邻.我相信第二部分不能单独用css完成,而且需要javascript.我找到了一个可能对你有所帮助的页面,但我现在没有时间尝试一下:http://www.webmasterworld.com/forum83/6942.htm


What color is the sky?

推荐阅读
mobiledu2402851373
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有