一般表单文本框提示信息:placeholder=" ",默认颜色是灰色的,输入文本信息也是默认为黑色的,如图所示:

修改placeholder提示内容的颜色关键代码及实现:

实现输入的时候字体颜色变成其他颜色(如红色)的关键代码及实现:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#name:focus{
color:red;
}
#password:focus{
color:#FFA015;
}
input::-webkit-input-placeholder{
color:pink;
}
input:-moz-placeholder{
color:pink;
}
</style>
</head>
<body>
<form>
<label for="male">姓名:</label>
<input type="text" id="name" placeholder=" 请输入您的姓名"/>
<label for="male">密码:</label>
<input type="password" id="password" placeholder="请输入您的密码"/> </form>
</body>
</html>

修改placeholder提示内容的颜色以及文本框输入文字内容的颜色的更多相关文章

  1. JS控制文本框输入的内容

    总而言之:   先在‘<input>’ 里输入      onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g, ...

  2. js实现文本框输入文字个数限制代码

    html: <div class="curr_eval_box">                <input type="hidden" n ...

  3. UC浏览器input文本框输入文字回车键自动提交

    这是测试今天在jira给我提出的一个bug 下面是贴的代码 屏蔽或者禁止回车键 <!DOCTYPE html> <html> <head> <meta cha ...

  4. 转摘:ashx+jquery-autocomplete文本框输入提示功能Asp.net

    引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...

  5. js入门-文本框输入特定内容控制另一个文本框

    在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...

  6. select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色

    1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...

  7. iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮

    一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...

  8. Selenium向iframe富文本框输入内容

    目录 前言 只输入纯文本 通过JS注入HTML代码 前言 在使用Selenium测试一些CMS后台系统时,有时会遇到一些富文本框,如下图所示: 整个富文本编辑器是通过iframe嵌入到网页中的,手动尝 ...

  9. DEV中dx:ASPxPopupControl 控件的使用(在窗口关闭或隐藏时,清楚文本框中的内容)

    //在窗口关闭或隐藏时,清楚文本框中的内容(核心代码) function(s, e) { ASPxClientEdit.ClearGroup('entryGroup'); } <asp:Cont ...

随机推荐

  1. python - 文件迭代

    >>> f=open('passwd','r')>>> for lines in f:... print lines >>> f=open('pa ...

  2. 总结asp.net页面跳转

    ASP.NET页面跳转相关知识 一.<a>标签   1. <a href=”test.aspx”></a>   2. 这是最常见的一种转向方法; eg:  < ...

  3. Qt之qt4.7 和qt 4.8.4 交叉实践

    开发机环境搭建: 测试环境:CentOs7.1  Ubuntu 12.0.4 操作流程: 一.编译Qt4.7.0 1)CentOS上实践 1.tar xzvf qt-everywhere-openso ...

  4. MVC4 Filter 验证客户端访问类型(移动端、PC端)

    Filter: 1 /// <summary> /// 检测是否是手机访问 /// </summary> public class IsMobileFilter : Actio ...

  5. HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  6. AjaxFormSubmit使用demo

    官网:http://jquery.malsup.com/form/#download 下载地址 $("#form1").ajaxSubmit({ success: function ...

  7. Notepad++的列编辑功能

    转自:http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/index.html http://www.crifan.c ...

  8. 2016年上半年金融类App成绩单,手机银行优势尽显! (转自Analysys易观(ID:enfodesk))

    2016已悄然时过大半,金融各领域经过了开年大战,二季度末尾的6月更是几家欢喜几家愁,其中频繁出现的黑马更是足够让人惊喜.我们基于易观千帆6月移动应用大数据,筛选了百款金融类App为您揭晓TOP100 ...

  9. POJ 3281:Dining(最大流)

    http://poj.org/problem?id=3281 题意:有n头牛,f种食物,d种饮料,每头牛有fnum种喜欢的食物,dnum种喜欢的饮料,每种食物如果给一头牛吃了,那么另一个牛就不能吃这种 ...

  10. LeetCode----326. Power of Three(Java)

    package isPowerOfThree326; /* Given an integer, write a function to determine if it is a power of th ...