1.结构：

in div class=' box 1 ' input/div class=' box 2 ' img//div/div 2 . CSS:

1)设置图片div的绝对定位，调整到与原输入一致。

2)将输入的宽度和高度设置为与图片的div一样大，这样更精确。

3)然后设置输入：位置：相对；然后设置它的z索引，使它浮动在图片中div的顶部。

4)调整两者的位置，使其重合。

5)设置输入：opacity:0

3.在3.jq中：

$ (function () {$ ('input '))。点击(function () {if (this。选中){$(此)。兄弟姐妹(' . box2 ')。查找(' img ')。attr ('src '，'所选图片的src ')；} else {$ (this)。兄弟姐妹(' . box2 ')。查找(' img ')。attr ('src '，'未选择图片的src ')；}})})注意：兄弟()中只能有一个属性。您不能同辈(' . box2img ')，这是错误的。

对于radio来说，修改默认样式也是如此，但是在jq中必须有所改变。

如果想先点第一个电台，再点同名电台，选中后，第一个电台背景变为未选中，第二个电台背景变为选中，使用上面jq中的代码无法实现。第一次选择后，点击第二次将使两个背景都成为选中图片。

因此，在判断是否选中时，添加：

$ (function () {$ ('input '))。单击(function () {$ ('input '))。每个(函数(){if (this。选中){$(此)。兄弟姐妹(' . box2 ')。查找(' img ')。attr } else {$ (this)。兄弟姐妹(' . box2 ')。查找(' img ')。attr ('src '，'未选择图片的src ')；}})})需要遍历输入

补充：

用图片替换复选框的样式

由于项目需要，登录时需要保存用户名，所以需要使用checkbox。复选框样式是给定的图片，没有选中：

，选择：

开始准备改变复选框的样式来达到目的，但是结果再也没有回来。由于复选框的大小，很难改变样式，无论如何也无法获得我想要的效果。所以我尝试用图片代替复选框的样式。

主要知识点：

(1)点击标签元素中的图片，复选框控件将被触发。也就是说，当用户选择标签时，浏览器会自动将焦点转向与标签相关的复选框控件。

input type=' checkbox ' class=' clsCheckBox ' ID=' chkRememberPwd '/label for=' chkRememberPwd ' img src=' http : $ { CTX }/images/more/Selector _ default . png ' width=' 38 ' height=' 38 ' onclick=' checkbox()'//label//checkbox设置为隐藏。clsCheckBox { display:none到css}(2)点击图片时，通过JS切换图片。代码如下：

var结果=真；function checkbox(){ if(result==true){ document . images[0]。src=' $ { CTX }/images/more/selector _ focus . png '；结果=假；} else if(result==false){ document . images[0]。src=' $ { CTX }/images/more/selector _ default . png ' result=true；}}登录页面代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML L1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' xmlns=' http://www .w3。org/1999/html ' hearteta http-equiv=' Content-Type ' Content=' text/html charset=utf-8 '/title用户登录/title脚本历史记录。forward()；/script script type=' text/JavaScript ' func _ key(事件){ if(事件。键码==13){ DoLogin()；} }函数清理(o){ o . value=' '；o .风格。textalign=' left} var结果=真；function checkbox(){ if(result==true){ document。图像[0].src=' $ { CTX }/images/more/selector _ focus。png '；结果=假；} else if(result==false){ document。图像[0].src=' $ { CTX }/images/more/selector _ default。“png”结果=真；} }/scriptstyle type='text/css ' .clsCheckBox { display : none }/style/head body div id=' head ' div id=' HeAdInfo ' span登录/span/div/div formtable class=' partb '单元格间距=' 0 '单元格填充=' 0 ' tr class=' partba ' TD class=' partbb '用户名/TD tdinput name=' UserClientNumber ' id=' UserClientNumber ' class=' partbc ' type=' text ' value=' onfocus='清理(此)'//TD/tr class=' part be /tr class=' ba部分' TD class=部分'密码/TD tdinput name=' user password ' id=' user password ' class=' partbc ' type=' password ' value=' onfocus=' clean up(this)'//TD/tr/tabletabletabletable table style=' width :450 px； 边距：-20px 15px；padd :0 px ' width=' 480 ' border=' 0 ' trtdinput type=' checkbox ' class=' clsCheckBox ' ID=' chkrememberwd '/label for=' chkrememberwd ' img src=' http : $ { CTX }/images/more/selector _ default。png ' width=' 38 ' height=' 38 ' onclick=' checkbox()'//labelspan style=' padding-left 336015 px；font-size :24 px颜色： # 999999垂直对齐：顶；行高：38 px'记住用户名/span/TD TD style=' text-align : right；填充-右侧：0 pxa href='modifyPassword！装载。动作' style='边框-底部： 1px实心# FFA 200span style=' color : # FFA 200 font-size :24 px；'找回登录密码/span/a/TD/tr/table table class=' partb ' style=' margin-top :180 px；border=' 0 ' tr TD width=' 240 ' align=' left ' div class=' bottondiv ' input class=' input botton ' type=' button ' onclick=' JavaScript : dolo gin()；值='登录//div/TD TD width=' 240 ' align=' left ' div class=' bottondiv ' input class=' input botton ' type=' button ' onclick=' location=' register！loadRegister.action“”值='注册//div/TD/tr/table/form/body/html总结

以上所述是小编给大家介绍的用图片替换检验盒原始样式并实现同样的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！