css常用技巧:input提示文字；placeholder字体修改

时间：2022-09-17 14:05:30

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

css常用技巧:input提示文字；placeholder字体修改

2  源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>input输入框提示文字</title>
    <style>
        /*修改提示文字的颜色*/
        input::-webkit-input-placeholder { /* WebKit browsers */
            color: #666666;
        }

        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #666666;
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #666666;
        }

        input:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #666666;
        }
    </style>
</head>
<body>
<input type="text" placeholder="搜索天猫/商品"/>
</body>
</html>

3 介绍:下图方框内决定了,placeholder的文字颜色,同时也可以进行相应更改颜色的设置.

css常用技巧:input提示文字；placeholder字体修改

颜色对比

css常用技巧:input提示文字；placeholder字体修改

css常用技巧:input提示文字；placeholder字体修改

css常用技巧:input提示文字；placeholder字体修改的更多相关文章

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

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

  2. input提示文字；placeholder字体修改

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

  3. api日常总结：前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

  4. HTML、CSS常用技巧

    一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...

  5. Python入门（一）：PTVS写Python程序，调试模式下input&lpar;&rpar;提示文字乱码问题

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

  6. CSS 常用技巧

    概述 相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊文本,样式重置,清除浮动,通用媒体查询,自定义选择文本,强制出现滚动条,固定头部和页脚 ...

  7. css常用技巧

    去点号 list-style:none; 字体居中 text-align:center; 链接去下划线 text-decoration:none; 鼠标禁止右键 <body oncontextm ...

  8. css常用技巧集合

    1 不想让按钮touch时有蓝色的边框或半透明灰色遮罩(根据系统而定) /*解决方式一*/ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-use ...

  9. css常用技巧1

    css绘制三角形 <style> .triangle-box{ margin: 50px auto; height: 300px; width: 500px; box-shadow: 1p ...

随机推荐

  1. js 与 jq 的节点添加删除实例

    JavaScript实例:XML DOM节点的添加 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  2. Python教程［廖雪峰］，主要是实践

  3. Android 怎样使用API

    本文针对Android开发如何使用API文档进行一些经验分享. 1.为什么需要掌握API的使用. 也许你需要完成一个功能时很多时候你在网上google一番,因为很可能找到有用的代码片段,甚至不用关心具 ...

  4. R语言和数据分析十大：购物篮分析

    提到数据挖掘,我们的第一个反应是之前的啤酒和尿布的故事听说过,这个故事是一个典型的数据挖掘关联规则.篮分析的传统线性回归之间的主要差别的差别,对于离散数据的相关性分析: 常见的关联规则: 关联规则:牛 ...

  5. Hdoj 1176&period;免费馅饼 题解

    Problem Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁 ...

  6. 【转】WPF自定义控件与样式&lpar;6&rpar;-ScrollViewer与ListBox自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合 ...

  7. 开启swap交换分区

    开启swap 1.创建用于交换分区的文件: dd if=/dev/zero of=/mnt/swap bs=1M count=2048 注:block_size.number_of_block 大小可 ...

  8. python ddt模块

    ddt模块包含了一个类的装饰器ddt和两个方法的装饰器: data:包含多个你想要传给测试用例的参数: file_data:会从json或yaml中加载数据: 通常data中包含的每一个值都会作为一个 ...

  9. thinkphp C函数的实现原理

    在写一个php原生函数的时候,想起使用thinkphp的C函数读取数据库配置非常方便,于是看了看源码的实现,原理很简单,分享一下: 下面是common.php,实现了C函数: if(is_file(& ...

  10. python2除法保留小数部分

    转载:http://www.cnblogs.com/yhleng/p/9223944.html 1.python2和python3除法的最大区别: python2: print 500/1000 py ...

相关文章