7.palacehoder的自定义样式【输入框input /文本域textarea】

因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。  

::-webkit-input-placeholder { /* WebKit browsers */  

 color:#999;   

}  

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  

  color:#999;   

}  

::-moz-placeholder { /* Mozilla Firefox 19+ */  

 color:#999;   

}   

:-ms-input-placeholder { /* Internet Explorer 10+ */   

  color:#999;   

}

还可以写成下面这样:  

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {  

 color: #666;  

}   

input:-moz-placeholder, textarea:-moz-placeholder {   

color:#666;   

}   

input::-moz-placeholder, textarea::-moz-placeholder {   

color:#666;   

}   

input:-ms-input-placeholder, textarea:-ms-input-placeholder {   

color:#666;   

}

知识点:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。  

css伪元素:CSS 伪元素用于向某些选择器设置特殊效果。   

伪元素由双冒号和伪元素名称组成。

双冒号是在当前规范中引入的,用于区分伪类和伪元素。

但是伪类兼容现存样式,浏览器需要同时支持旧的伪类, 如:first-line,:first-letter,:before,:after等等。

因此对于css2之前已经有的伪元素两种写法的作用是一样的,但是为了兼容IE浏览器还是使用单冒号的写法。

palacehoder的自定义样式【输入框input /文本域textarea】的更多相关文章

  1. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  2. 解决:HTML中多文本域(textarea)回车后数据存入数据库,EL表达式取出异常。

    问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...

  3. 文本域textarea

      文本域 CreateTime--2017年5月23日15:12:08Author:Marydon 二.文本域 (一)语法 <textarea></textarea> (二) ...

  4. HTML中&lt;input&gt;參数,以及文本输入框,文本域的解说

    <form> <input type="text/password" name="名称" value="文本" /> ...

  5. Bootstrap系列 -- 16. 文本域textarea

    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...

  6. html文本域textarea高度自增、自动换行

    文本域自动换行.高度自增,采用以下方式: html: <textarea rows="1" class="answerTextArea" maxlengt ...

  7. 文本域textarea的一个小细节

    文本域代码在编写时,最好写在一行上,就像: 如果没写在一行上,如: 那么就会在后续生成的页面上输入的时候就会产生一段空白无法删除: 这是写文本框的时候的一个小细节

  8. css 文本域textarea显示成label标签

    <html> <head>     <title>textarea显示为label</title> <style type="text/ ...

  9. 文本域textarea显示输入剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. USB_ModeSwitch for Android 7

    USB_ModeSwitch官网: USB_ModeSwitch - Handling Mode-Switching USB Devices on Linux USB_ModeSwitch for A ...

  2. matplotlib箱线图与柱状图比较

    代码: # -*- coding: utf-8 -*- """ Created on Thu Jul 12 16:37:47 2018 @author: zhen &qu ...

  3. [20190423]那个更快的疑问3.txt

    [20190423]那个更快的疑问3.txt --//前一阵子,做了11g在单表单条记录唯一索引扫描的测试,摘要如下:--//参考链接:http://blog.itpub.net/267265/vie ...

  4. VUE的一个数据绑定与页面刷新相关的bug

    1.场景: N层嵌套的循环查询业务场景,框架是vue.其中在最后一层查完之后,还需要查其中每一项的两个属性,类型都是列表.查完之后将其赋值给一个变量用于页面展示.代码如下: (1)异常代码: getS ...

  5. 使用jquery模拟请求,测试项目是否存在跨域限制

    1.Get 请求 <html> <head><script src="https://cdn.staticfile.org/jquery/1.10.2/jque ...

  6. Eclipse中快捷键Ctrl + Alt + 向上箭头 或者 Ctrl + Alt + 向下箭头与Windows冲突

    原文地址:https://blog.csdn.net/buaaroid/article/details/50804608 clipse中按ctrl + alt + 向上箭头没有任何反应,按ctrl + ...

  7. HashMap源码分析(基于jdk8)

    我们知道在jdk7中HashMap的实现方式是数组+链表.而在jdk8中,实现有所变化,使用的是数组+链表+红黑树实现的. 当链表长度达到8时转化为红黑树. static final int TREE ...

  8. 判定你的java应用是否正常(是否内存、线程泄漏)的一个简单方法

    给大家推荐一个最简单的判定你的java应用是否正常的方法: step1:部署你的应用,让它跑起来: step2:打开jdk下bin目录下的jconsole.exe工具,连接到你的应用——以监测线程和内 ...

  9. CMakeList.txt设置OpenCv路径

    源文件imageBasics.cpp #include <iostream> #include <chrono> using namespace std; #include & ...

  10. webpack4 学习 --- 处理静态资源

    webpack 是利用loader 来处理各种资源的,wepback的配置基本上就是为各种资源文件,指定不同类型的loader. 1,处理css 最基本的css 处理loader 是css-loade ...