在很多网站上我们都看到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. 每日一题 - 剑指 Offer 40. 最小的k个数

    题目信息 时间: 2019-06-30 题目链接:Leetcode tag: 快排 难易程度:中等 题目描述: 输入整数数组 arr ,找出其中最小的 k 个数.例如,输入4.5.1.6.2.7.3. ...

  2. Fetch.AI 首席技术官Toby Simpson参与AMA活动

    感谢7月11日在YouTube上参与 Fetch.AI AMA的所有人.我们收到了大量的问题,遗憾的是我们没有时间回答其中的多数问题.如果你错过了现场AMA,你可以在下面观看全部内容: 在本文中,我们 ...

  3. Docker装的Oracle 11g没有HR用户怎么办？一个脚本解决问题！

    #0x0 问题描述 这个学期有一门Oracle的课,我图省事就直接拉了个docker镜像来做练习,一直倒也没啥问题,但是今天的作业需要用到HR这个模板用户. 然而我执行alter user hr ac ...

  4. 为什么有时候人们用translate来改变位置而不是定位？

    translate()是transform的一个值. 改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)(复 ...

  5. Python 读取Excel之xlrd篇

    上一期给大家分享了如何用Python读取文本,这次给大家分享如何读取Excel表格内容,拿最常见的.xlsx和.xls格式来讲解. 本章主要知识点有: 读取整篇excel返回list[list[lis ...

  6. redis（二十)：Redis 架构模式实现（主从复制）

    什么是主从复制 我们可以通过slaveof <host> <port>命令,或者通过配置slaveof选项,来使当前的服务器(slave)复制指定服务器(master)的内容, ...

  7. linux09 /消息队列、saltstack工具

    linux09 /消息队列.saltstack工具 目录 linux09 /消息队列.saltstack工具 1. 消息队列之rabbitmq 2. 云计算 3. 远程过程调用的实现:rpc 4. s ...

  8. 用Canvas定时显示摄像头捕获的画像（HTML5）

    需要实现一个功能,大意嘛,就是标题写的那个意思.虽然用户只要求在微信中实现即可,也就是可以用JSSDK.但是前端小哥哥脑袋一根筋,就想用原生的H5和JS实现. 网上铺天盖地的资料,可惜没有一个是可以用 ...

  9. Python Ethical Hacking - DNS Spoofing

    What is DNS Spoofing Sniff the DNSRR packet and show on the terminal. #!/usr/bin/env python from net ...

  10. 从0搭建一个基于 ELK 的日志、指标收集与监控系统

    为了使得私有化部署的系统能更健壮,同时不增加额外的部署运维工作量,本文提出了一种基于 ELK 的开箱即用的日志和指标收集方案. 在当前的项目中,我们已经使用了 Elasticsearch 作为业务的数 ...