在很多网站上我们都看到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. java中执行cmd命令

    一.java执行cmd命令的三种方式:http://www.jb51.net/article/80829.htm 参考:https://www.cnblogs.com/zhufu9426/p/7928 ...

  2. vs2017+opencv3.4.0的配置方法

    1.尝试了这个博客的方法: https://blog.csdn.net/u014574279/article/details/50909425/ 结果: 无法打开文件“opencv_ml2410d.l ...

  3. 性能测试之Jmeter中场景设置与启动方式

    Jmeter场景设置与启动方式 性能测试场景是用来模拟模拟真实用户操作的工作单元,所以场景设计一定要切合用户的操作逻辑,jmeter主要是通过线程组配合其他组件来一起完成场景的设置. 线程组设置 Jm ...

  4. gulp之demo

    1.安装gulp cnpm install -g gulp; 2.然后还需要在当前目录安装gulp,具体不详,只知道安装了之后会在当前目录下的node_modules下多一个gulp文件夹 cnpm ...

  5. Python爬虫教程(16行代码爬百度)

    最近在学习python,不过有一个正则表达式一直搞不懂,自己直接使用最笨的方法写出了一个百度爬虫,只有短短16行代码.首先安装必背包: pip3 install bs4 pip3 install re ...

  6. day70 django中间件

    目录 一.django的七个中间件 二.如何自定义中间件 1 自定义中间件的创建方式 2 django提供自定制中间件的五个方法 2.1 必须掌握两个方法 2.2 了解方法 三.csrf跨站请求伪造校 ...

  7. Beautiful Soup 4 方法便捷查询

    目录 BS4便捷查询 属性 子节点 父节点 兄弟节点 格式化输出 搜索文档树 修改文档树 BS4便捷查询 准备 : import requests, re from bs4 import Beauti ...

  8. 数据库02 /MySQL基础数据类型、完整性约束、sql_mode模式

    2.MySQL基础数据类型.完整性约束.sql_mode模式 目录 2.MySQL基础数据类型.完整性约束.sql_mode模式 1. MySQL常用数据类型 MySQL常用数据类型预览 1. 1 数 ...

  9. [Antd-vue] Warning: You cannot set a form field before rendering a field associated with the value.

    在用ant-design-vue的框架中,使用到了这种场景,就是点击编辑按钮,弹出modal模态框,渲染modal模态框中的form表单页面,并给表单赋值,但是在给表单赋值的时候,总是会报错. 错误提 ...

  10. Hello！GitHub 好用好玩值得收藏的开源项目集合~

    这是我许久以来从各处发现的极佳开源项目,希望分享给大家~ 如果帮到你了,给我个赞好嘛 编程语言类 ️learn-go-with-tests(通过单元测试学Go) GitHub地址:https://gi ...