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

<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;

}

input {  color:blue; }

</style>

设置以后如果input 有placeholder,字体会变成红色,然后输入文字后,文字马上会变成蓝色

input提示文字;placeholder字体修改的更多相关文章

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

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

  2. html中input提示文字样式修改

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

  3. Python入门(一):PTVS写Python程序,调试模式下input()提示文字乱码问题

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

  4. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  5. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  6. required - HTML5里的input标签的required属性提示文字修改

    input 里面增加这样的语句: <input type="text" placeholder="您的姓名" required oninvalid=&qu ...

  7. 修改 input中的placeholder的字体样式和颜色

    placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性 火狐:-moz-placeholder { /* Mozilla Fir ...

  8. input 标签实现带提示文字的输入框

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...

  9. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

随机推荐

  1. C/C++内存检测工具Valgrind

    内存检测Valgrind简介 Valgrind是运行在Linux上一套基于仿真技术的程序调试和分析工具,作者是获得过Google-O'Reilly开源大奖的Julian Seward, 它包含一个内核 ...

  2. JavaScript Symbol

    创建: 2019/02/26 完成: 2019/02/26  生成  每次生成的值都不一样(===, ==都是) var sym = Symbol(); // 可以有参数, 是对symbol的说明 v ...

  3. Perfect项目快速上手

    1.在您从Swift.org(英文版)完成Swift 4.0 toolchain工具集安装之后,请打开一个命令行终端并输入命令 swift --version Apple Swift version ...

  4. TextBox禁用与启用的方法

    $('#text1').textbox('enable');// 启用 $('#text1').textbox('disable');// 禁用 注:以上方法也适用于datebox等等

  5. AndroidTV开发

    AndroidTV的开发其实和Android的开发是一样的,现在的电视机可以安装AnroidApp

  6. Serervlet | 两种跳转方式

    https://www.cnblogs.com/fanhc/archive/2012/09/21/2696343.html response.sendRedirect是向客户浏览器发送页面重定向指令, ...

  7. DRF教程1-序列化

    序列化类 要建立web API,要做的第一件事就是对实例进行序列化,比如以json方式显示.我们可以生命序列化,它和django的forms很相似.在app目录下创建serializers.py fr ...

  8. Longest Palindromic Substring笔记

    这是一道在leetcode上看到的题目 一开始,我能想到的思路是蛮力法: 就遍历每个字符,然后对每个字符都尝试从1到n的长度,看有没有回文串,并记录以该字符起始的回文串的最大长度.这个思路其实没有上手 ...

  9. SimpleDateFormat 如何安全的使用?

     前言 为什么会写这篇文章?因为这些天在看<阿里巴巴开发手册详尽版>,没看过的可以关注微信公众号:zhisheng,回复关键字:阿里巴巴开发手册详尽版 就可以获得. 关注我 转载请务必注明 ...

  10. 记住,永远不要在MySQL中使用“utf8”-转

    http://www.infoq.com/cn/articles/in-mysql-never-use-utf8-use-utf8 最近我遇到了一个bug,我试着通过Rails在以“utf8”编码的M ...