input type="radio" 样式美化

最新推荐文章于 2021-08-03 20:19:57 发布
最新推荐文章于 2021-08-03 20:19:57 发布
阅读量185 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/yibinboy/archive/2009/03/24/1420188.html
版权

input{
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #FFF 1px solid;
FONT-SIZE: 11pt;
color: #000000;
BORDER-LEFT: #fff 1px solid;
BORDER-BOTTOM: #666 1px solid;
FONT-FAMILY: "Arial", "sans-serif";
LINE-HEIGHT: 110%;
height:20px;
}


input[type="radio"]{border:none;}

 

 

 

 

 

 

问题：radio图片样式有三个，未选中时是空图片，选中左边一排时是叉，右边一排时是勾，两个只能有一个出现，即选中勾时叉不出现，选中叉时勾不出现。默认状态是有一个被选中的。
方法：首先我看过jquery修改checkbox样式过，于是上网查找，找到了jquery修改radio的样式。网址是：http://kawika.org/jquery/cssRadio/根据这个页面，我来做修改。
radio.js

jQuery.fn.cssRadio = function () {

   var context = this;
   jQuery("input[@type='radio'] + label", this)
     .each( function(){
     if (jQuery(this).prev().attr('name') == "radio2")
           jQuery(this).addClass("checked_1");
       })
     .hover(
       function() { $(this).addClass("over"); },
       function() { $(this).removeClass("over"); }
     )
     .click( function() {
       jQuery("input[@type='radio'] + label", context)
         .each( function() {
           jQuery(this)
             .removeClass()
             .prev()[0].checked = false;
         });
        
         if(jQuery(this).prev().attr('name') == "radio1") {
           jQuery(this).addClass("checked").prev()[0].checked = true;
         }
         else
         jQuery(this).addClass("checked_1");
       })
     .prev().hide();
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/radio.js"></script>
<script type="text/javascript">
$(document).ready( function () {
   for(var i=1; i<3; i++)  
   $("#a_"+i).cssRadio();
  
});
</script>
<style type="text/css">
.content{
   padding-left:40px;
   line-height:40px;
}
.content label {
   padding-left:40px;
   background: url(images/radio_0.gif) no-repeat;
   cursor: pointer;
   display:block;
}
.content label.checked {
   background: url(images/radio_1.gif) no-repeat;
   color: #008800;
}

.content label.checked_1 {
   background: url(images/radio_2.gif) no-repeat;
   color: #008800;
}
.content label.over {
   color: #0000FF;
}

</style>

</head>

<body>
<div class="content">
   <div>
     <p>选项组一</p>
     <div id="a_1" >
       <p><input type="radio" name="radio1"   /><label>选项一</label></p>
       <p><input type="radio" name="radio2"     /><label>选项二</label></p>
     </div>
   </div>
   <div>
     <p>选项组二</p>  
     <div id="a_2" >
       <p><input type="radio" name="radio1"   /><label>选项一</label></p>
       <p><input type="radio" name="radio2"     /><label>选项二</label></p>
     </div>
   </div>  
</div>  
</body>
</html>

转载于:https://www.cnblogs.com/yibinboy/archive/2009/03/24/1420188.html

weixin_30314793
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input的checkbox和radio控件样式美化
wuyou1336的博客
08-30 3876
复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般不能满足我们的需求，设计师喜欢一些漂亮的图片，用css做出此效果。 input#gps_open_close[type="checkbox"]{-o-appearance: none; -webkit-appearance: none;-moz-appearance:none; background-
自定义 input[type=radio] 样式
suwyer的博客
08-21 7531
input[type=radio] 原生的单选框样式和原生的复选框样式是一样的不美观，而通常设计过程中，为了契合产品风格，也会将这些组件样式设计的很漂亮，但是直接修改原生的样式，会发现只可以设置少数的样式，其余样式并没有效果。 因此，我们就需要自定义 radio 的个性化样式 ，来契合产品的漂亮风格了。 我这里简单的介绍两种CSS实现的方式： 两种方式都使用表单元素中的 label 元素和f...
input radio 选中css样式,input radio和checkbox的样式美化
weixin_29938387的博客
08-03 788
做项目的时候我们常常需要使用单选按钮input[type=radio]和多选框input[type=checkbox]，但是默认的样式肯定与UI设计不一致,而且不够美观，这个时候就需要修改默认的样式，方法其实有蛮多，最先想到的是图片，但是有些时候，图片作为背景图片使用，在手机端适配效果不太理想，所以利用css3的重新实现了一遍，注意，因为使用到伪类属性，故在ie8下无效。原理利用label标签与对...
css input checkbox和radio样式美化
FireBird_one的博客
12-06 867
css input checkbox和radio样式美化 2014年9月1日 198716次浏览 在之前的一篇文章中，我已经介绍了input file上传按钮的美化，地址：http://www.haorooms.com/post/css_input_uploadmh ,今天，我们来讲一下checkbox美化和radio美化，关于select下拉框的美化的话，要用一个jquery插件
表单input控件的单选框【radio】、复选框【checkbox】类型的样式美化
夏天的风
11-07 3471
在前端开发中，input标签的使用频率非常高，但是input标签默认的样式和UI设计的样式有很大区别。用CSS3可轻松实现input标签的默认样式美化，改成喜欢的模样
控制input的CSS但不影响CheckBox以及Radio的样式
09-05
在一些Web界面,有时候为了方便会写一个全局的input样式,这样所有的样式会立刻变化，如果能更好的区分checkbox等呢。
jQuery操作input type=radio的实现代码
10-28
jQuery操作input type=radio的实现代码，需要的朋友可以参考下
css input[type=file] 样式美化(input上传文件样式 )
09-24
主要介绍了css input[type=file] 样式美化(input上传文件样式 )的相关资料,需要的朋友可以参考下
定义input type=file 样式的方法
12-14
input type=”file” name=”file” /> 既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样： 复制代码代码如下: <div class=”file-box”> <form action=”” method=”post” ...
使用纯CSS美化radio和checkbox
04-28
使用纯CSS代码实现radio以及checkbox的美化工作。附参考实例，可以根据具体情况进行进一步的修改，灵活多变。
jquery美化checkbox,radio
05-29
、根据原有的select 模拟生成新的 select。 2、支持键盘，可通过键盘选择选项。 3、可自定义样式。 4、方便灵活，可选择需要的seletc 进行模拟（非全局模拟） 5、判断用户是否开启脚本支持，若未开启，不进行模拟。 6、测试通过IE6+,Firefox 3.5.5,Chrome 3.0.1,Opera 10.0,Safari 4.0.4 7、增强select，鼠标经过select即弹出选项进行选择
漂亮的Checkbox Radio漂亮样式
02-18
漂亮的Checkbox Radio漂亮样式
input radio单选框样式优化
可口可乐哟的博客
09-17 2545
HTML代码： &lt;form&gt; &lt;div&gt; &lt;input id="item1" type="radio" name="item" value="水果" checked&gt; &lt;label for="item1"&gt;&lt;/label&gt;
input checkbox；radio；上传按钮；样式美化
Tang
07-05 1745
html代码如下：&lt;span class="pay_list_c1 on"&gt; &lt;input type="radio" checked="checked" name="paylist" value="1" class="radioclass"&gt; &lt;/span&gt;css 代码：.pay_list_c1 { wid
input中的radio和checkbox美化
米老头
03-20 585
html:代码 css代码 i{ width: 24px; height: 18px; float: left; padding-top: 3px; cursor: pointer; text-align: center; margin-right: 10px; background-image: url(images/input.png); background-repeat: no-r
php radio样式美化,用JavaScript更改input中radio和checkbox样式
weixin_31036839的博客
03-23 191
随着前端技术的进步和发展，传统的表单样式已经不能满足需求，由于美观上的要求，网上现在出现了很多的这种表单美化插件。上网搜了一下，还真的不少，不过都没怎么用，我不喜欢在网页的头部加载一群js，有的网页头部这样的标签排列很长，很多的js一起加载进来，之间可能会出现bug不说，就是当初更改起来也不是很方便。插件有插件的好处，有它的便捷性。如果为了效率，使用插件值得考虑。如果是为了研究学习，建议还是自己写...
纯CSS美化单复选框（checkbox、radio）
weixin_38047955的博客
03-29 761
选择框样式 label {font-size:12px;cursor:pointer;} label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;
html多选框 美化,使用CSS美化radio和checkbox
weixin_33497800的博客
06-03 250
单选框Radio和多选框checkbox需要美化吗？当然，原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化，我们有借 助Javascript来做美化的，也有直接用CSS来美化的，今天我给大家介绍使用纯CSS实现radio和checkbox的美化。我们知道，很多使用JS来美化表单控件的方法都不是很理想，需要借助引入js和css，有的甚至使用图片和字体图标，而且还要依赖jQuery，...
纯CSS 实现radio checkbox样式美化
duanghuang的博客
08-22 8886
我们知道CSS 是不能直接定义radio 标签和checkbox 标签的样式，但是默认的实在是太丑了，总要想办法来美化美化这货的。强大的CSS选择器可以帮助我们来实现美化。 首先我们看我们美化过的 再回顾下默认样式 可以亲自点一下！ 约吗? 约不约，叔叔我们不约 你喜欢的电影明星是？ 苍井空波多野结衣罗玉凤 真不知道晚
<div class="left"> <h2>请对老子的思想进行评价：</h2> <div class="stars"> <input type="radio" name="rating" id="rating-5"> <label for="rating-5"></label> <input type="radio" name="rating" id="rating-4"> <label for="rating-4"></label> <input type="radio" name="rating" id="rating-3"> <label for="rating-3"></label> <input type="radio" name="rating" id="rating-2"> <label for="rating-2"></label> <input type="radio" name="rating" id="rating-1"> <label for="rating-1"></label> </div>添加一些css样式，填补一些内容，此页面有些单调
最新发布
06-01
<input type="radio" name="rating" id="rating-5"> <label for="rating-5"> <input type="radio" name="rating" id="rating-4"> <label for="rating-4"> <input type="radio" name="rating" id="rating-3"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值