css使用for属性美化radio控件 学浪计划

我们在使用radio，checkbox等控件的时候，需要对原有的样式进行美化，但是此类控件美化程度有限。

所以就出来了for属性，需要配置lable标签使用。

for 属性规定 label与哪个表单元素绑定，作用是 在点击label时会自动将焦点移动到绑定的元素上。

经常使用在radio和checkbox等input元素上。

<code>
<
input
 
type
=
"radio"
 
name
=
"name"
 
id
=
"radio4"
 />
<
label
 
for
=
"radio4"
>
男
label
>
/<code>

上述代码就把input和lable绑定起来了，for属性对应的是input的id值。

这样我们在点击label的时候，也会触发radio的check事件，就会选中。

下图是我使用for属性和css相邻选择器美化了radio选择框：

代码如下(可直接复制运行)：

<code> >
<
html
>

<
head
>

    
<
meta
 
charset
=
"utf-8"
 />

    
<
title
>
title
>

    
<
link
 
href
=
"https://www.sammh.com/css/reset.css"
 
rel
=
"stylesheet"
 />

    
<
style
>

        
ul
 {
            
margin-left
: 
200px
;
            
margin-top
: 
200px
;
        }
        
ul
 
li
{
            
display
:inline-block;
            
margin-left
:
20px
;
        }
        
label
 {
            
margin-right
: 
5px
;
            
border
: 
1px
 solid 
#4C70B1
;
            
border-radius
: 
100%
;
            
width
: 
20px
;
            
height
: 
20px
;
            
cursor
: pointer;
            
transition
: ease 
300ms
;
            
display
:inline-block;
        }

        
label
:hover
 {
            
border-color
: 
#ccc
;
            
background-color
: 
#4C70B1
;
            
box-shadow
: 
0
 
0
 
7px
 
#ccc
;
        }

        
input
[type=radio]
:checked+label
{
            
background-color
: 
#4C70B1
;
        }
    
style
>

head
>

<
body
>

    
<
ul
>

        
<
li
>

            
<
input
 
type
=
"radio"
 
name
=
"name"
 
id
=
"radio1"
 
value
=
"14"
 
hidden
 />
<
label
 
for
=
"radio1"
>
label
>
<
span
>
男
span
>

        
li
>

        
<
li
>

            
<
input
 
type
=
"radio"
 
name
=
"name"
 
id
=
"radio2"
 
value
=
"15"
 
hidden
 />
<
label
 
for
=
"radio2"
>
label
>
<
span
>
女
span
>

        
li
>

        
<
li
>

            
<
input
 
type
=
"radio"
 
name
=
"name"
 
id
=
"radio3"
 
value
=
"16"
 
hidden
 />
<
label
 
for
=
"radio3"
>
label
>
<
span
>
人妖
span
>

        
li
>

    
ul
>
   
body
>

html
>
/<code>