17.2.25、nimil
今天开始做百度前端学院的任务,第一个是。
但是本身的样式又不太美观:
本身的 radio 外观;本身的 checkedbox 外观。
不能改样式,却又如此的不美观,实在不符合我们现在的审美和需求。
这是百度给的一个样式图片:
首先,html:
- for="radio2" class="radioOne after radioLabel1">
- for="radio" class="radioOne after radioLabel" >
- for="checkbox" class="checkboxLabel after">
本次使用到了 background-img、background-position、checked 选择器、
- input {
- display: none;
- /*隐藏input*/
- }
- label {background: url(img / spread.png);
- background - repeat: no - repeat;
- }
- /*为label统一加上背景图:*/
.after{
width: 30px;height: 25px;display: block;/* 设置 label 样式 */
}/* 定义所有 label 初始样式 */
- .radioLabel{
- background-position: 26% 15%;
- }
- .checkboxLabel{
- background-position: 26% 113%;
- }
在 radio 被选中后,改变对应 label 的样式。这里用到了 CSS 选择器:checked。
- #radio2:checked ~ .radioLabel1{
- background-position: 75% 15%;
- }
- #radio:checked ~ .radioLabel{
- background-position: 75% 15%;
- }
- #checkbox:checked ~ .checkboxLabel{
- background-position: 75% 113%;
- }
这时会出现一个问题,我试了很多次才发现问题处在什么地方。
如图中的 1、2,我的 label 写在对应 input 下方,如果写在上面,checked 选择器是查不到的。上面的 css 也不会起作用。
以上。
踩 (0) 赞 (0)来源: http://www.bubuko.com/infodetail-1959905.html