css怎么做打勾的方框

html-css017

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>

正好最近弄了这个

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<div style="width:30pxheight:30px display: nonemargin: 0pxbackground-color: red" id="lable" onclick="lable_click(this)" >

<!--<img width="30px" height="30px" src="xxx.png">或者背景图片

(点击无背景的checkbox使它变成成有背景色的对勾,

也可以如果用2个div,一个做没有对勾的背景一个做有对勾的背景,使checked一直处于隐藏状态,每次都用

document.getElementById('checked').checked = false)或document.getElementById('checked').checked = true)

使没有显示的checkbox改变它的checked值。

-->

</div>

<input id="checked" type="checkbox" value="" style="width: 30pxheight: 30pxdisplay: blockmargin: 0px" onclick ="checkbox_click(this)" />

<script>

function lable_click(obj){

obj.style.display = "none"

document.getElementById('checked').style.display = "block"

document.getElementById('checked').checked = false//

}

function checkbox_click(obj){

obj.style.display = "none"

document.getElementById('lable').style.display = "block"

}

</script>

</body>

</html>

在文档里加入复选框就能打勾。

复选框是一种可同时选中多项的基础控件,也是基于计算机语言(C语言、java语言、CSS+HTML超文本标记语言)的编程代码框架,一般控制的方法是按住ctrl键,然后鼠标左击进行点选操作来完成复选多个目标。

(在office2010中,选择“文件”→“选项”→“自定义功能区”→勾选右侧 “开发工具 ”→确定,之后顶上的标签菜单会出现一个 开发工具),会在Word窗口的编辑区左侧出现一个新的工具条,这就是“控件工具箱”,其中有一个按钮是内部有小对勾的方框,用鼠标指向时会出现“复选框”的提示。

点“复选框”按钮,会在Word页面上出现一个叫标有“CheckBox1”的小方框,即“第1复选框”,前面的小方框就是复选框,底纹是灰色,点“控件工具箱”的第一个按钮“退出设计模式”就可以在内部打对勾的,也可以取消对勾。再点“复选框”按钮,会在页面上再出现一个“复选框”标签,叫“CheckBox2”,即“第2复选框”。往下依次类推。

在这些标签上仅仅显示“CheckBox1”和“CheckBox2”肯定是不能满足要求的,要修改这些标签内容。底纹要变为白色,要和文字融为一体。

按下“控件工具箱”第一个按钮,使它处于“设计模式”,点中一个“复选框”,四周会出现八个小圆圈,处于选中状态,点“控件工具箱”第二个按钮,在左侧出现一个“属性”对话框,点“BackColor”项,这是设置背景颜色的,右边的单元格中出现个下拉三角,点击,选中合适的颜色。点“Caption”项,当单元格为蓝色时,右侧的单元格就可以编辑了,输入你需要的文字,WORD的正文中立即就变成了你输入的文字。点“控件工具箱”的第一个按钮“退出设计模式”,试试效果。

希望我能帮助你解疑释惑。