在很多网站上我们都看到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. python数据结构（三）

    copy 复制对象,copy模块包含了两个行数copy和deepcopy,用于复制现有的对象. 浅副本(浅复制) copy()创建的浅副本是一个新容器,其中填充了原对象内容的引用 import cop ...

  2. Flask路由中使用正则表达式匹配

    1.说明 由于flask并不支持直接使用正则表达式来匹配路由,我们可以使用werkzeug.routing的BaseConverter来实现 2.代码 from flask import Flask ...

  3. 二叉树的深度（剑指offer-38）

    题目描述 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 递归解析: 思路: 从根节点出发,查询左子树的深度,获取右子树的深度 ...

  4. @Autowired 引发的一系列思考

    关于Java注解 注解定义 标记注解 - 没有元素 @interface Marker { } 单元素注解 - 只有一个元素 @interface Single { String value() de ...

  5. 【转】Hbuilder配置Avalon、Vue指令提示

    转载自CSDN http://blog.csdn.net/jianggujin/article/details/71419828 我本人是一名Java后端开发,偶尔也会研究一下前端内容,因为Hbuil ...

  6. day29 继承

    目录 一.property装饰器 应用场景1 应用场景2 应用场景3(场景2优化) 二.继承介绍 1 语法 2 属性查找 3 继承的实现原理 3.1 菱形问题 3.2 继承原理 3.3 深度优先和广度 ...

  7. 终于理解Python中的迭代器和生成器了！

    迭代器和生成器 目录 迭代器和生成器 可迭代对象和迭代器 基础概念 判断 for循环本质 不想用for循环迭代了,如何使用迭代器? 列表推导式 生成器Generator 概念 如何实现和使用? 生成器 ...

  8. java 面向对象（二十三）：关键字：abstract以及模板方法的设计模式

    abstract abstract: 抽象的1.可以用来修饰:类.方法2.具体的:abstract修饰类:抽象类 * > 此类不能实例化 * > 抽象类中一定有构造器,便于子类实例化时调用 ...

  9. 数据可视化之 图表篇（四） 那些精美的Power BI可视化图表

    之前使用自定义图表,每次新打开一个新文件时,都需要重新添加,无法保存,在PowerBI 6月更新中,这个功能得到了很大改善,可以将自定义的图表固定在内置图表面板上了. 添加自定义图表后,右键>固 ...

  10. 前端09 /jQuery标签操作、事件、补充

    前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...