input样式l修改和焦点事件转移

一 label

<input type="file" id="male" style="display: none;"></input>

<label for="male" style="background:url(‘http://fgg.natali.com.cn/resources/images/1.jpg‘);width:130px;height:130px;display: block;"></label>

lable标签的 for属性等于input的id,然后设置input隐藏就可以,然后设置这个lable的各种样式就是代表了这个input,这个是简单的方法

二 用div设置img图片,input绝对定位覆盖这个div,然后input设置opcity:0

.box{

position: relative;width:130px;height:130px;

}

#file{

width:100%;height:100%;

position:absolute;z-index: 5;left: 0;top: 0; cursor: pointer;

opacity: 0;

}

.dimg{

position: relative;width: 100%;height: 100%; cursor: pointer;

}

<div class="box">

<input type="file" id="file"></input>

<div class="dimg">

<img src="http://fgg.natali.com.cn/resources/images/1.jpg">

</div>

</div>

这个方法的就是 input是透明的 opcity:0;虽然肉眼看不见,但是它还是有宽高的占据了文档的位置,鼠标看似点击了图片,其实还是点击了input框框,只不过这个input框框透明了而已。这个方法和方法1可以达到同样的效果,但是麻烦,推荐方法1。

这里的input是flie 也可以用其他的type

时间: 2024-10-08 20:32:50

input样式l修改和焦点事件转移的相关文章

input提示字在有焦点消失或输入改变时消失

一:获取焦点时 提示字消失 <input type="text" name="textfield" value="这里是提示内容" onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" />

拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

在用dom操作在对页面中的<style></style>里的样式进行操作时,发现时无效的,我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中,因此JS操作时取不到此标签的内容 一个标签的样式有可能是多个样式文件所定义而成了,所以浏览器在解释标签的时候会有一个计算标签最后样式的过程,想要对<style>中定义格式的标签的样式进行修改必须去操作最后浏览器计算机计算出的样式,这里用obj下的currentStyle方法,具体测试如下: <html> &l

ecshop 浏览历史样式的修改

ecshop的浏览历史的样式,例如我修改的是只让浏览历史显示浏览历史的商品名称 而不显示浏览历史的商品的价格和图片 首先找到要修改 的文件includes\lib_insert.php 找到函数function insert_history() 函数里面的 $str.='<ul class="clearfix"><li class="goodsimg"><a href="'.$goods['url'].'" targ

安卓运行机制JNI、Dalvik、ART之间的比较 。android L 修改运行机制。

Android L默认采用ART运行环境,完全兼容64位移动处理器.Google称这将比此前的Dalvik模式性能提高两倍,但是会占用更多的内存空间.Android有三种运行模式:JNI.Dalvik.ART.Dalvik明显是最慢的,完全的JNI模式是最快的但是开发难度高,ART介于两者之间,并且不影响现有开发模式,所以Google选了ART.我们的技术工程师对此做了技术解读: 1)JNI:在开发过程中使用编译器在C/C++等语言直接编译成机器码,运行的时候能够充分利用系统性能,这是最快的.i

js实现class的样式的修改、添加、删除

比较常见的js前端功能,通过修改标签的className实现相应的功能 代码例如: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td> <a e_value="g_sn" ename="商品编码" class="goods_sale_property" href="javascript:void(0

input框中修改placeholder的样式

有时间input标签的placeholder属性会出现问题,下面是修改placeholder的样式demo input::-webkit-input-placeholder{ color:red; font-size:20px; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; font-size:20px; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */

number类型的input样式修改及绑定左右按钮

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters</title> <style type="text/css"> *{border:none;margin:0px;padding:0px;} .number{ pad

原生JS获取HTML样式并修改

大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出!!! 一. 行内元素样式获取: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js获取外部样式</title

常用的input样式美化。

在平常的网站开发中,css,html提供的关于<input type ="checkbox"/>或者<input type = "file"/>的样式不是我们想要的,那么现在我们来介绍一个小技巧,来设置成我们想要的样式. 第一个input框的美化,原理是用一个a标签包裹一个input标签,让input溢出,设置input标签的透明度为0,然后设置a标签就可以设置显示的样式了 DOM结构: <a href="javascript