关闭

怎么修改单选框radio默认样式

标签: css
1092人阅读 评论(0) 收藏 举报
分类:

怎么修改单选框radio默认样式

苏生不惑苏生不惑 5.6k 2014年05月27日 提问
  •  1 关注
  •  3 收藏,27.4k 浏览
0

默认radio的样式为:

怎么改为图片替代,并能获取选中的值

3 个回答

1
采纳
StephenLee 5.7k 2014年05月27日 回答 · 2014年05月28日 更新

苏生兄你标签选的 jQuery,那么我就用 jQuery 尝试实现下这个效果,因为 jQuery 学得不深,因此不一定是最佳方案,背景图直接从网上找到。:)
先把 HTML 码好:

<div>
  <input type="radio" id="nba" checked="checked" name="sport" value="nba">
  <label name="nba" class="checked" for="nba">NBA</label>
  <input type="radio" id="cba" name="sport" value="cba">
  <label name="cba" for="cba">CBA</label>
</div>

接着是 CSS:

input[type="radio"] {
  margin: 3px 3px 0px 5px;
  display: none;
}
label {
  padding-left: 20px;
  cursor: pointer;
  background: url(bg.gif) no-repeat left top;
}
label.checked {
  background-position: left bottom;
}

再就是 jQuery 代码了:

$(function() {
  $('label').click(function(){
    var radioId = $(this).attr('name');
    $('label').removeAttr('class') && $(this).attr('class', 'checked');
    $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
  });
});
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:314036次
    • 积分:4107
    • 等级:
    • 排名:第7529名
    • 原创:81篇
    • 转载:189篇
    • 译文:0篇
    • 评论:9条
    文章分类