如何创建一个带有可点击标签的HTML复选框(这意味着单击标签将复选框打开/关闭)?
当前回答
您还可以使用CSS伪元素(分别)从所有复选框的值属性中选择和显示标签。 编辑:这将只适用于webkit和闪烁基于浏览器(Chrome(ium)， Safari, Opera....)，因此大多数移动浏览器。这里不支持Firefox或IE。 这可能只在嵌入webkit/blink到你的应用程序时有用。
所有的伪元素标签都是可点击的。
{后(type =复选框): 内容:attr(价值); 边距:-3px 15px; vertical-align:最高; 空白:nowrap;} 显示:inline-block; ｝ <input type="checkbox" value="My checkbox label value" />
演示:http://codepen。io/mrmoje/pen/oteLl， +它的要点
其他回答
这应该对你有帮助:W3Schools - Labels
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
标签{ 边框:1px实心#ccc; 填充:10 px; 边距:0 0 10px; 显示:块; ｝ 标签:{徘徊 背景:# eee; 光标:指针; ｝ <label><input type="checkbox" />Option 1</label> <label><input type="checkbox" />Option 2</label> <label><input type="checkbox" />Option 3</label> .
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
您还可以使用CSS伪元素(分别)从所有复选框的值属性中选择和显示标签。 编辑:这将只适用于webkit和闪烁基于浏览器(Chrome(ium)， Safari, Opera....)，因此大多数移动浏览器。这里不支持Firefox或IE。 这可能只在嵌入webkit/blink到你的应用程序时有用。
所有的伪元素标签都是可点击的。
{后(type =复选框): 内容:attr(价值); 边距:-3px 15px; vertical-align:最高; 空白:nowrap;} 显示:inline-block; ｝ <input type="checkbox" value="My checkbox label value" />
演示:http://codepen。io/mrmoje/pen/oteLl， +它的要点
它也很有效:
<form>
<label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
<label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>
