html 设置input单选点击图片时选中？

html-css027

html 设置input单选点击图片时选中？,第1张

把input和img包含在同一个label标签内，而label的for属性指向input的id即可，比如：

<label for="test1">

<input id="test1" name="test" type="radio"/><img src="图片1"/>

</label>

<label for="test2">

<input id="test2" name="test" type="radio"/><img src="图片2"/>

</label>

<label for="test3">

<input id="test3" name="test" type="radio"/><img src="图片3"/>

</label>

假设没彩色的图片是1.png  有彩色的是2.png 然后这个是一个div的背景图 底下是div的文字 代码如下

$('div').mouseover(function(){

    $(this).css('background','url(2.png)').css('color','blue')

}).mouseout(function(){

    $(this).css('background','url(1.png)').css('color','#000')

})

可以设置一下html中的accept属性以实现上传文件类型的筛选，accept 属性只能与 <input type="file">配合使用。它规定能够通过文件上传进行提交的文件类型。

工具原料：编辑器、浏览器

1、设置一个文件上传选项，删选一下只能上传图片或者详细的限制只能上传图片的某些格式，代码如下：

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp">

  <input type="file" name="pic" accept="image/*">

  <input type="submit">

</form>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 input 标签的 accept 属性。</p>

<p><strong>注释：</strong>鉴于安全考虑，该例不允许您上传文件。</p>

</body>

</html>

2、运行的结果是只能上传图片不能上传其他的文件，在弹出的上传选择对话框中也会值显示图片，如下图：