设置input标签的placeholder的样式

设置input样式代码: input::-webkit-input-placeholder{ /*WebKit browsers*/ color: red; } input::-moz-input-placeholder{ /*Mozilla Firefox*/ color: red; } input::-ms-input-placeholder{ /*Internet Explorer*/ color: red; }…

更改input标签的placeholder的样式

主要是要区别不同浏览器的不同css类在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ input:-moz-placeholder{} /* Firefox版本4-18 */ input::-moz-placeholder{} …

[oldboy-django][2深入django]学生管理（Form）-- 编辑(设置input标签属性，设置input标签默认显示值，设置input的类型）

1 django 后台实现设置input标签属性,设置input标签默认显示值,设置input输入框类型 # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及submit标签还是要在前端写的, 但是Form标签内的Input标签可以在后台实现:只需要按以下步骤 - views定义StudentForm(Form)类 - views视图函数将Form实例化对象传递给前端 - 前端{{ obj.段 }}即可 b. 通过Form设置前端Input的type属性,即设…

设置input标签placeholder字体颜色

有时会遇到这样的需求,输入框的默认提示文字与用户输入的文字不同. <input className="city" placeholder="城市"/> input {color:#ff7800} 如果只是设置input的颜色的话是达不到想要的效果的,css3有关于设置placeholder的属性-input-placeholder Webkit内核的浏览器和Microsoft Edge使用的是伪元素::-webkit-input-placeholder…

关于input标签和placeholder在IE8，9下的兼容问题

一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移动端的项目中. 二. IE10+浏览器下,input标签会有一个默认的样式,比如文本框的'×'号,密码框的小眼睛.初衷是好的,有时候很方便,但有时候我们会自己设置样式和功能.可以用伪元素方法去除: ::-ms-clear, ::-ms-reveal{display: none;} 三. 在低版本的I…

设置Input标签Date默认值为当前时间

需求:想设置Imput标签Date默认值为当前时间,通过JavaScript实现. <html> ...... <body> <input type="date" id="date_info" placeholder="请输入时间"/> ...... <script> $(document).ready(function () { var time = new Date(); var day = (…

使用js设置input标签只读 readonly 属性

先上代码: <html> <head> <title> test </title> <meta charset="utf-8"> </head> <script language="JavaScript"> function setReadonly() { //document.getElementById("test").setAttribute("r…

改变input标签中placeholder显示的颜色

::-webkit-input-placeholder { /* WebKit browsers */ color: #A9A9A9; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #A9A9A9; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #A9A9A9; opacity: 1; } :-ms-input-placeholder…

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 */…

前端 html input标签 placeholder属性标签上显示内容

前端 html input标签的placeholder属性标签上显示内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: auto&q…

IE6下input标签border问题

IE6下input标签的border的样式border:none;是不起作用的!要设置border:0px;才行!…

关于 html input标签的几个常用操作

1.清除 input 标签默认样式 input { -moz-appearance: none; outline: 0; text-decoration: none; outline: none; border: 0; } 2.input 标签属性 placeholder 的修改 =>input::webkit-input-placeholder input::-webkit-input-placeholder { font-size: px2rem(22); color: rgba(136,…

Input标签文件上传，使用详解

1.html添加标签按钮 <button ion-button (click)="selectVideo()">添加</button> <input id="uploadPic" type="file" (change)="handleVideo($event)"/> 解释:button作用,用来美化input上传n按钮.同时设置Input 标签 display:none;隐藏input.…

解决input标签placeholder属性浏览器兼容性问题的一种方法

为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属性,此时必须通过另外的方式来实现输入提示. 其实,我们可以利用label标签来模拟placeholder属性.先看例子,后解释: <!DOCTYPE html> <html> <head> <script type="text/javascript"…

placeholder的样式设置

在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ :-moz-placeholder{} /* Firefox版本4-18 */ ::-moz-placeholder{} /* Firefox版本19+ */ :-ms-inpu…

（转载）CSS分别设置Input样式（按input类型）

(转载)http://www.uml.org.cn/html/201207202.asp 当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的: <input type="text" /> 文本框 <input type="password" /&…

CSS分别设置Input样式（按input类型）

当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的: <input type="text" /> 文本框 <input type="password" /> 密码框 <input type="submit" />…

input placeholder属性样式修改(颜色,大小,位置)

placeholder属性样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12p…

css设置input中placeholder字体

设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@a} input:-ms-input-placeholder {color:@a} 设置input中placeholder字体大小 input::-webkit-input-placeholder {font-size: @a} input:-moz-placeholder {font-size:…

修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

一.修改input元素placeholder属性样式在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholder样式(也有可能是遇到了一个处女座的设计师或者是客户),就不等不修改一下placeholder的样式.可以通过下面的代码修改样式: /*Chrome.Safari等 webkit内核浏览器*/ ::-webkit-input-placeholder{ color:red; } /*Firefox*/…

修改input属性placeholder的样式

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="木人子韦一日尘"> <title>…

input设置背景透明、placeholder的字体颜色及大小

1.设置input背景透明: background:rgba(255,255,255,0.1); 前面三个参数为对应的rgb数值,第四个参数为透明度:0~1,0:透明,1:不透明: 2.设置input的placeholder字体颜色和大小: #myInput::-webkit-input-placeholder{ font-size:16px; color: #ffffff; } 3.效果展示:…

设置input的样式

css中的 ” 七层重叠法 ” :即网页内容先后顺序分别为:背景边框,负值z-index,display:block,浮动,display:inline-block,z-index:auto,正值z-index,越往后在网页中的层级越靠前,也就是说如果一个z-index值为1或者更高的话,它就会遮挡掉他之前的所有元素. 利用这个法则以及opacity设置透明度,可以模拟一个样式: <style> *{ margin:; padding:; } .uploadbox{ width:150px;…

使用placeholder属性设置input文本框的提示信息

input文本框中设置提示信息,可以使用placeholder属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" placeholder="请输入用户名"value=""…

去除input标签点击时的默认样式

去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框…

修改 input中的placeholder的字体样式和颜色

placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性火狐:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999; } 火狐 ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#999; } ie浏览器 :-ms-input-placeholder { /* Internet Explorer 10+ …

认识input输入框的placeholder属性

我们来认识下input输入框的placeholder属性. placeholder 属性提供可描述输入字段预期值的提示信息.(placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password) 该提示会在输入字段为空时显示,并会在字段获得焦点时消失(IE10+获取焦点消失,Chrome,FF等在输入有值时消失). IE10+,Chrome,Firefox,Safari支持placeholder属性(I…

解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;"> <div class="form-group"> <la…

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" />  &…

前端与后台可能需要使用交互的表单form，input标签

前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form表单和input标签什么是表单???表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素一般表单区域使用form标签来进行包裹着:注意form是双标签使用如下: <form action="url">表单元素</form> action用于向…

【设置input标签的placeholder的样式】的更多相关文章