本文介绍了一种使用图片而非文字来展示RadioButton的方法。通过修改HTML标签样式属性，可以将普通的RadioButton替换成图片形式，增强了界面美观性和用户体验。
在做web开发时后可能你会使用到radiobutton 但是又不想使用单调的文字来显示
就像这样
<input TYPE="radio" NAME="demo" value="test">test</input>
或者是
<input TYPE="radio" NAME="demo" id="demo" value="asdf"></input>
<LABEL for="demo">asdf </LABEL>
你会问我不想用文字，想用图片来实现怎么办，我来告诉你一个简单那的方法
全部代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<input TYPE="radio" NAME="df" id="demo" value="asdf"></input>
<LABEL for="demo">asdf </LABEL>
<input id=xclw_check type=checkbox value=1 name=check></input>
<LABEL style="BACKGROUND: url(http://writeblog.youkuaiyun.com/Resources/images/blank.gif) fixed no-repeat center center; WIDTH: 150px; HEIGHT: 40px" for=xclw_check> </LABEL>
</BODY>
</HTML>
width="750" scrolling="no" height="110" frameborder="0" src="http://p.alimama.com/cpacode.php?t=A&pid=mm_10130287_0_0&w=750&h=110&rn=1&cn=3&ky=&cid=110214&bgc=FFFFFF&bdc=E6E6E6&tc=0000FF&dc=0000FF" style="width: 750px; height: 110px;" name="alimamaifrm" id="alimamaifrm" border="0" marginwidth="0" marginheight="0">
就像这样
<input TYPE="radio" NAME="demo" value="test">test</input>
或者是
<input TYPE="radio" NAME="demo" id="demo" value="asdf"></input>
<LABEL for="demo">asdf </LABEL>
你会问我不想用文字，想用图片来实现怎么办，我来告诉你一个简单那的方法
全部代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><input TYPE="radio" NAME="df" id="demo" value="asdf"></input><LABEL for="demo">asdf </LABEL><input id=xclw_check type=checkbox value=1 name=check></input><LABEL style="BACKGROUND: url(http://writeblog.youkuaiyun.com/Resources/images/blank.gif) fixed no-repeat center center; WIDTH: 150px; HEIGHT: 40px" for=xclw_check> </LABEL></BODY></HTML>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
