css怎么做打勾的方框

html-css011

css怎么做打勾的方框,第1张

这个得用Html做的

<form action="" method="get">

您喜欢的水果？<br />

<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>

<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>

<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>

<label><input name="Fruit" type="checkbox" value="3" />梨 </label>

</form>

用了JQ库，样式在style里，不过要配合js用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="jquery-3.3.1.min.js"></script>

</head>

<style>

.div1{

text-align: center

background: beige

width: 50px

height: 28px

border-radius: 14px

}

.span1{

/* margin-top: 7px*/ /* div的时候打开注释 */

background: #CCCCCC

width: 13px

height: 13px

display: inline-block

border-radius: 7px

}

.div2{

text-align: center

background: lawngreen

width: 50px

height: 28px

border-radius: 14px

}

.span2{

background: white

width: 13px

height: 13px

display: inline-block

border-radius: 7px

}

.hid1{

display: none

}

.hid2{

}

</style>

<body>

<!-- button的 -->

<button class="div1">

<span class="hid1">是</span>

<span class="span1"></span>

<span class="hid2">否</span>

</button>

<hr>

<hr>

<!-- div的 -->

<!-- <div class="div1">

<span class="hid1">是</span>

<span class="span1"></span>

<span class="hid2">否</span>

</div>-->

</body>

<script>

$(function(){

$(".div1").click(function(){

$(".span1").toggleClass("span2")

$(".div1").toggleClass("div2")

$(".hid1").toggle()

$(".hid2").toggle()

})

})

</script>

</html>

用css3可以直接用图片作为背景就可以了，不需要用js。解决方法如下：

1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvas.html。

2、打开已新建的canvas.html文件，修改title标签里的文字内容。

3、在<body></body>标签内，插入一个canvas标签，并设置id属性值。

4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。

5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。

6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。

7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。