这个不是样式决定的,是有 type决定的
创新互联长期为上千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为善右企业提供专业的网站建设、成都网站建设,善右网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
input type="***"
type="radio" 单选按钮
type="checkbox" 复选框
下拉列表则是如下形式出现的
select name="cars"
option value="volvo"Volvo/option
option value="saab"Saab/option
option value="fiat"Fiat/option
option value="audi"Audi/option
/select
单选按钮的样式是无法修改的,这是html固定的,跟其它控件不一样
如果你一定要用自己的样式觉得美观,你可以这样做:
自己做一张图片,左半边是单选按钮选中的样子,右半边是没选中的样子,利用js和css,只显示其中一半,当被点击时切换到另一半。
form method="post" action=""
p
label for="q1"
input id="q1" name="question" type="radio" checked="checked" /A. 答案1/label
/p
p
label for="q2"
input id="q2" name="question" type="radio" /B. 答案2/label
/p
p
label for="q3"
input id="q3" name="question" type="radio" /C. 答案3/label
/p
p
label for="q4"
input id="q4" name="question" type="radio" /D. 答案4/label
/p
p
label for="q5"
input id="q5" name="question" type="radio" /E. 答案5/label
/p
/form
不需要css,html搞定
不能吧,那个是系统默认的。。。
可以用checkbox复选框,在选择时js判断只能选中一个,做出类似于单选框的效果
直接将radio的单选标签添加disable属性即可。如下 单选选项 这样的话在页面上看到的radio button就是灰色的也不能点眩
form
div
input id="item1" type="radio" name="item" value="选项一" checked
label for="item1"/label
span选项一/span
/div
div
input id="item2" type="radio" name="item" value="选项二"
label for="item2"/label
span选项二/span
/div
/form
div {
position: relative;
line-height: 30px;
}
input[type="radio"] {
width: 20px;
height: 20px;
opacity: 0;
}
label {
position: absolute;
left: 5px;
top: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
}
/*设置选中的input的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
input:checked+label {
background-color: #fe6d32;
border: 1px solid #fe6d32;
}
input:checked+label::after {
position: absolute;
content: "";
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg)
}
ie8以上有效