选中复选框之后，而不是勾号符号需要HTML中的HTML [英] After selecting check box Instead of Tick symbol need X in html

问题描述

选中当前表单中的复选框后，我将默认选中标记符号。但在这里我需要X（十字标记）。我是否需要为此类添加类，并且必须为该类应用任何样式。这是我尝试的简单形式

  <输入类型=复选框>选定的第一个元素
< input type =checkbox>选择第二个元素
  

解决方案

试试这个，我会为您提供小提琴也是，

input [type = checkbox] .css-checkbox {position ：绝对;溢出：隐藏; clip：rect（0 0 0 0）;高度：1px的;宽度：1px的;保证金：-1px;填充：0;边界：0; } input [type = checkbox] .css-checkbox + label.css-label {padding-left：20px;高度：15px的;显示：内联块;行高：15像素;背景重复：不重复; background-position：0 0;字体大小：15像素;垂直对齐：中部;光标：指针; } input [type = checkbox] .css-checkbox：checked + label.css-label {background-position：0 -15px; } .css-label {background-image：url（http://csscheckbox.com/checkboxes/lite-x-red.png）; }

< form>< input id =demo_box_2 class =css-checkboxtype =checkbox/>< label for =demo_box_2name =demo_lbl_2class =css-label> Selected Option< / label>< input id = demo_box_3class =css-checkboxtype =checkbox/>< label for =demo_box_3name =demo_lbl_3class =css-label> Selected Option< / label>< / form>

试试这段代码

检查小提琴链接

After selecting the check box in a form currently I am getting tick symbol as default. but here I need X(cross Mark) . Do I need put a class for that and have to apply any styling for that class.This is the simple form I am trying

 <input type="checkbox"> Selected 1st element
 <input type="checkbox"> selected 2nd element

解决方案

Try this, I will provide you a fiddle too,

input[type=checkbox].css-checkbox { position: absolute;  overflow: hidden;  clip: rect(0 0 0 0);  height:1px;  width:1px;  margin:-1px;  padding:0; border:0; } 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px;  display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; }  .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }

<form>
<input id="demo_box_2" class="css-checkbox" type="checkbox" />
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
<input id="demo_box_3" class="css-checkbox" type="checkbox" />
<label for="demo_box_3" name="demo_lbl_3" class="css-label">Selected Option</label>
</form>

Try the snippet

check the Fiddle link

这篇关于选中复选框之后，而不是勾号符号需要HTML中的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！