您当前的位置:首页 > 网站建设笔记 >

使用纯CSS美化radio和checkbox

0

label

HTML 4.0引入了label对象,你可以使用它将文本与其他任何(X)HTML对象或内部控件关联。无论用户单击<label>或者(X)HTML对象,被链接的<label>和(X)HTML对象在引发和接收事件时行为一致,而要连接<label>和(X)HTML对象的方式是:将<label>的for属性设置为要关联的(X)HTML对象的id属性。例如:

<label for="username">用户:</label><input type="text" id="username" name="username">

当用户单击<label>内的文本(用户:)时,<label>会将焦点设置到文本框。

<label>主要是给表单组件增加可访问性设计的,一般我们都把label用在表单里。除以上方法,还可以直接用label套嵌整个表单组件和文本标签,例如下面的例子:

<label for="likeSleep"><input type="checkbox" id="likeSleep" name="like">睡觉</label>
<label for="likeEat"><input type="checkbox" id="likeEat" name="like">吃饭</label>

Radio(单选按钮)

Checkbox(复选按钮)

顶部中部底部