在很多网站上我们都看到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. 二.drf之使用序列化编写视图

    总结:两功能序列化: a.拿到queryset --->idc = Idc.objects.all() b.将queryset给序列化成类---->serializer = IdcSeri ...

  2. 如何针对Thymeleaf模板抽取公共页面

    对于公共页面(导航栏nav.页头head.页尾footer)的抽取有三种方式:        1)基于iframe进行抽取,这种方式很有效,但比较老了,另外为了页面的自适应性,还得做不少工作:     ...

  3. 主存到Cache直接映射、全相联映射和组相联映射

    转自:https://blog.csdn.net/dongyanxia1000/article/details/53392315 ---- Cache的容量很小,它保存的内容只是主存内容的一个子集,且 ...

  4. 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之MySQL配置

    mysql高并发配置 要在mysqld下设置 1. 修改back_log参数值:由默认的50修改为500.(每个连接256kb,占用:125M) back_log=500 back_log值指出MyS ...

  5. Netty 中的内存分配浅析-数据容器

    本篇接续前一篇继续讲 Netty 中的内存分配.上一篇 先简单做一下回顾: Netty 为了更高效的管理内存,自己实现了一套内存管理的逻辑,借鉴 jemalloc 的思想实现了一套池化内存管理的思路: ...

  6. Scala数据结构(二)

    一.集合的基础操作 1,head头信息 //获取集合的第一个元素 val list = List(,,) list.head // 2,tail尾信息 //获取集合除去头元素之外的所有元素 val l ...

  7. CF819B Mister B and PR Shifts 题解

    题目 Some time ago Mister B detected a strange signal from the space, which he started to study. After ...

  8. day39 作业

    实现生产消费原理 from multiprocessing import Process,JoinableQueue import time import random def cooker(q): ...

  9. 微服务架构中的BFF到底是啥？

    在<技术中台与业务中台都是啥玩意>一文中留下一个问题:BFF是啥?为啥在API网关和业务中台之间加入了一层BFF?考虑到在实际工作中,我的大部分同事都问过这个问题,这里我也总结一下进行答复 ...

  10. python面试题六: 剑指offer

    面试题3 二维数组中的查找 LeetCode题目:二维数组中,每行从左到右递增,每列从上到下递增,给出一个数,判断它是否在数组中思路:从左下角或者右上角开始比较 def find_integer(ma ...