在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加：placeholder="提示文字即可"，那么如果要修改提示文字的样式呢？可以这样设置css样式：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>input输入框提示文字</title>

<style>

/*修改提示文字的颜色*/

input::-webkit-input-placeholder { /* WebKit browsers */

color: red;

}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: red;

}

input::-moz-placeholder { /* Mozilla Firefox 19+ */

color: red;

}

input:-ms-input-placeholder { /* Internet Explorer 10+ */

color: red;

}

</style>

</head>

<body>

<input type="text" placeholder="请输入用户名" />

</body>

</html>

修改后提示文字样式如下：

html中input提示文字样式修改的更多相关文章

  1. input 默认提示文字 样式修改(颜色,大小,位置)

    input::-webkit-input-placeholder{ color:red; font-size:20px; ...... }

  2. input提示文字；placeholder字体修改

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...

  3. css常用技巧:input提示文字；placeholder字体修改

    1 很多网站都需要更改 <input>内部的placeholder 文字颜色属性:下面来介绍下这个技巧. 2  源代码: <!DOCTYPE html><html> ...

  4. Python入门（一）：PTVS写Python程序，调试模式下input()提示文字乱码问题

    前两天写了Python入门(一),里面提到,使用VS2013+PTVS进行Python开发. 就在准备为第二篇写个demo的时候,发现了一个问题,各种解决无果,有些纠结 Python中输入函数是inp ...

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

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  7. input placeholder 文字颜色修改

    placeholder 文字颜色修改 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozill ...

  8. MVC与Validate验证提示的样式修改

    MVC中使用Validate的验证,要修改错误提示样式一共有3处需要修改,否则就不太完美了: MVC中的Validate的验证机制只用在后台写一次,就可以完成前台和后台的完美验证,前台的验证主要是依靠 ...

  9. react项目中对dom元素样式修改的另一种方法以及将组件插入到node节点中

    在项目中,以前如果遇到对dom元素的操作都是直接获取dom元素,比如说: 但是如果修改的样式比较多的话,不如直接"切换"dom元素,如下例子: 这样会节省一些性能.因为操作dom的 ...

随机推荐

  1. rhel7 rpmbuild 制作二进制程序安装包(.rpm) 简单示例

    下载rpm-build: # yum install rpm-build 如果上述方式无法安装(没配置网络源,虚拟机下是安装媒介源) 可以用下列方式下载后再安装(实践结果可能版本问题引起的缺少太多的* ...

  2. java语法学习

    // 单行注释 /* 多行注释 */ /** JavaDoc(Java文档)注释是这样的.可以用来描述类和类的属性. */ // 导入 java.util中的 ArrayList 类 import j ...

  3. Rust String（官方文档翻译）

    学习Rust,官方文档全英文,查询不太方便,索性直接翻译完,方便查询使用.有需要自由转载,本人英文水平有限,文档是在谷歌翻译的基础上加个人理解完成,不敢保证正确.文档翻译错误的地方欢迎指出: 原文地址 ...

  4. day03 编程语言介绍

    一.编程语言分类 目录 一.编程语言分类 1.低级语言 1.1机器语言 1.2.汇编语言 2.高级语言 2.1编译型语言(例:c语言) 2.2解释型语言(例:世界上最好的语言python) 3总结 二 ...

  5. 数据可视化之PowerQuery篇（八）利用PowerQuery，进行更加灵活的数据分列

    https://zhuanlan.zhihu.com/p/66540160 常规分列 我们最常见的就是有固定分隔符的规范数据,这种直接就按照分隔符拆分就可以了, 如果没有分割符怎么办?依然是上面的数据 ...

  6. 微信小程序支付、小程序支付功能、小程序支付方法、微信小程序支付方法

    相信大家在做小程序的时候不可避免的会碰到支付功能小程序的支付和pc的是有区别的小程序的支付方法为 wx.requestPayment wx.requestPayment({ timeStamp: '' ...

  7. 微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行

    相信大家在做小程序的时候启动页跳转到tab首页会用到switchTab 但是在跳转后发现页面模块不全,后面console.log()后发现是onLoad里面的方法不执行 解决这种问题的方法页有很多中, ...

  8. 如何手写一个ArrayList

    写完HashMap,觉得手痒痒,所以隔了一天再来实现一下简单的ArrayList,ArrayList相比而言就非常的简单,主要的核心点有以下几个方面: 1.ArrayList的底层是由数组构成的 2. ...

  9. less : 写一个display:flex的mixin

    和scss一样,less也是一个好用的css预处理语言,语法也很相近. 而我们在使用display:flex的时候,很容易苦恼于里面的设置的单词很难记(尤其是对我这种英语很差的人来说). 所以我们可以 ...

  10. java代码之美(17) ---Java8 LocalDateTime

    Java8 LocalDateTime 在java8之前我们在处理时间的时候都是用的Date,但它其实有很明显的缺点. 1.我们也会对日期做一些操作,比如加几天.加几分,当月的最后一天等等.有些计算实 ...