58 css 改变input type=file样式 placeholder属性

最新推荐文章于 2023-05-28 19:18:48 发布
最新推荐文章于 2023-05-28 19:18:48 发布
阅读量3k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fancivez/article/details/46609405
版权

1.雅实现input type=file 样式

<input type="button" value="上传文件" class="verification-after" οnclick="sendPhoneMessage()"/>

<input type="file" class="" 

style="position : absolute ;margin-left:-176px;z-index:1000;height:33px; filter:alpha(opacity:0);opacity: 0;width:176px" οnclick="sendPhoneMessage()"/>

在一个button上面套一个隐形的input type="file" 

重点是绝对定位 和负的margin值


2.placeholder属性，输入框效果类似与value


fancivez
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css改变file类型input框的默认样式以及改变placeholder的默认颜色
aek7426的博客
12-18 700
一、伪元素改变file类型input框的默认样式： css： ::-ms-browse, [type='file'] { padding: .4em; line-height: 24px; border: 1px solid #a0b3d6; background: #f0f3f9; color: #34538b; } ::-...
css自定义占位文本(placeholder)的样式的方法示例
12-10
当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML <input placeholder=...
【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 4563
一、HTML5 新增 input 表单属性 1、required 属性 2、placeholder 属性 3、autofocus 属性 4、autocomplete 属性 5、multiple 属性
input标签分别设置input文本框输入文本和placeholder提示符字体大小
热门推荐
poker624的博客
02-12 1万+
以下面为例，设置搜索框中输入文本字体大小和提示符的字体大小 <form action="#"> <input type="search" placeholder="Search ElementTech..." name="search" class="input"> </form> 分别设置input标签和placeholder提示符的css样式： .input{ display: table-cell; widt
实现input框中placeholder的动态效果
qq_49668888的博客
05-28 993
1.先看一下实现的效果。
Vue IE9不支持input的placeholder属性
暖一杯茶的博客
03-22 179
安装ie-placeholder npm install --save ie-placeholder main.js引入 import 'ie-placeholder'
Input 框中的 placeholder 属性获取焦点清空
weixin_45242865的博客
08-17 8066
本人在开发一个微信小程序时，遇到如下问题： input 框获取了焦点，但是 placeholder 属性的值却仍然还在，必须输入任意数据后，该值才会隐藏，这会给用户一种不好的体验效果。 理想效果应为：input 框一旦获取焦点，就隐藏 placeholder 属性的值。 一、在开发微信小程序时的实现方法大致如下： ① wxml 文件中的相关代码 首先在 wxml 文件中为 input 标签设置 onfocus 和 onblur 两个事件，且 placeholder 属性的值从 js 文件中的 data
h5给input元素type=file的对象赋值报错
Alex的博客
02-20 1291
Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string <input type="file" class=" form-control hide" placeholder="文件地址" id="filePath" /> $("#f.
input中的placeholder属性
qq_1240545777的博客
03-19 7802
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 &lt;input&gt; 类型：text, search, url, telephone, email 以及 password。使用：效果图：当因为用户名或密码错误，想子啊input中提示的时候，首先应该吧input....
SpringMVC表单文件上传方式
弓长弓长要努力啊
07-28 1099
表单文件上传方式 上传前提： 1. form表单有一个<input type="file"> 2.form表单的entype属性必须为multipart/form-data,表示请求正文的类型， 默认的表单请求都是以key-value的方式存放每个表单属性 multipart/form-data表示将请求分区，不同区存放不同求情...
不显示input type="file" 的默认样式
前端
06-13 5674
type=”file”的输入框设置为透明，并且定位位置为指定样式输入框的位置，class=”input”设置的宽度为380px,margin-left: -380px使得刚好覆盖在class=”input”上 &lt;input type="text" placeholder="请选择文件" id="filePath" class="input"&gt; &lt;input type="fil
使用placeholder属性设置input文本框的提示信息
11-21
input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form> 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息（hint）。 该提示会...
让低版本浏览器支持input的placeholder属性(js方法)
12-10
if( typeof input[‘placeholder’] == ‘undefined’ ) // 如果不支持placeholder属性 { $(‘input’).each(function( ele ) { var me = $(this); var ph = me.attr(‘placeholder’); if( ph && !me.val() ) { me...
HTML 5 input placeholder 属性如何完美兼任ie
12-14
复制代码代码如下: $(document).ready(function () { if ($.browser.msie) $(“input:text,input:password”).each(function () { var $placeholder = $(this).attr(“placeholder”); var $width = $(this).css(...
全兼容input/textarea标签的placeholder属性JS插件
12-15
该插件完整兼容placeholder属性。插件由原生JS编写，无需任何其他插件支持，并且使用简单，只需一行JS调用即可。 博客地址：http://blog.csdn.net/qq_17076445/article/details/78212240
111 js iframe表单提交后自动关闭 &
fancivez的专栏
11-07 2724
dialog插件api相关 background: 因为项目需要，要用dialog插件实现新增功能页面 demands:  1.高度自适应： autoFit ：true   2.新增结束窗口关闭 方法1： thinkphp: $this->assign('jumpUrl','javascript:window.close();');
118 js arale.dialog dialog嵌套时候改变关闭按钮的显示和隐藏状态
fancivez的专栏
12-15 1858
background: dialog嵌套时候改变关闭按钮的显示和隐藏状态 seajs.use(['dialog'],function(Dialog){ //弹出以后展示菜单 var dialog = new Dialog({ width: '1000px', autoFi
92 js 根据li里面a标签href属性来匹配当前url
fancivez的专栏
09-23 1770
1. $(function(){ var url = window.location.href ; var strs = new Array(); strs = url.split ('/'); for(items in strs){ $(".ui-tab-items a" ).each(function(){ var l
input type=fil
最新发布
08-02
回答: 要对input type=file进行样式美化，可以通过设置input的样式属性来实现。一种常见的方法是将type=file的输入框设置为透明，并且定位位置为指定样式输入框的位置。可以使用CSS属性opacity:0来使输入框透明，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值