如何设置RadioButtonList控件的样式
1、打开visual studio,并创建web窗体应用软件新项目
2、添加一个新的web窗体
3、加入RadioButtonList控件，并点击编辑项
4、输入数据项
5、确定数据项后，点击RadioButtonList控件，进入属性面板，设置BackColor和ForeColor，完成最简单的样式设置
1、用css+javascript设置样式
2、RadioButtonList控件的ID设置为RadioButtonList1，在aspx文件的<head></head>标签之间，插入以下代码：
<style type="text/css">
body
{
font-size:12px;
font-family:'宋体';
}
#RadioButtonList1_0 ,
#RadioButtonList1_1 ,
#RadioButtonList1_2
{
display:none
}
label
{
display:-moz-inline-block;
display:inline-block;
cursor:pointer;
margin:5px 0;
padding-left:20px;
line-height:15px;
background:url(1.gif) no-repeat left top;
}
label.checked
{
background-position:left bottom;
}
</style>
<script type="text/javascript">
window.onload = function () {
labels = document.getElementById('RadioButtonList1').getElementsByTagName('label');
radios = document.getElementById('RadioButtonList1').getElementsByTagName('input');
for (i = 0, j = labels.length ; i < j ; i++) {
labels[i].onclick = function () {
if (this.className == '') {
for (k = 0, l = labels.length ; k < l ; k++) {
labels[k].className = '';
radios[k].checked = false;
}
this.className = 'checked';
try {
document.getElementById(this.name).checked = true;
} catch (e) { }
}
}
}
}
var male_obj = { 'RadioButtonList1_0': '男', 'RadioButtonList1_1': '女', 'RadioButtonList1_2': '人妖' };
function checkform(obj) {
for (i = 0; i < obj.sex.length; i++) {
if (obj.sex[i].checked) {
alert(male_obj[obj.sex[i].value]);
break;
}
}
return false;
}
</script>
3、在aspx文件同文件夹下，添加radiobutton点击效果图片文件。
4、运行可见效果