zoukankan      html  css  js  c++  java
  • html5 CSS input placeholder兼容性处理

    1.HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现;

    2.由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问)

    1 function hasPlaceholderSupport() {
    2   return 'placeholder' in document.createElement('input');
    3 }

    3.默认提示文字是灰色的,可以通过CSS来改变文字样式:

     1 /* all */
     2 ::-webkit-input-placeholder { color:#f00; }
     3 input:-moz-placeholder { color:#f00; }
     4  
     5 /* individual: webkit */
     6 #field2::-webkit-input-placeholder { color:#00f; }
     7 #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
     8 #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
     9  
    10 /* individual: mozilla */
    11 #field2:-moz-placeholder { color:#00f; }
    12 #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
    13 #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
  • 相关阅读:
    Broadcom BCM94352z/DW1560驱动新姿势
    amd显卡更新最新驱动鼠标顿卡的解决方法
    设置 P2415Q & P2715Q 显示器使其支持 HDMI 2.0 启用 4k@60hz
    Web基础之Redis
    前端基础之AJAX
    Java基础之枚举
    解决Tomcat在idea控制台乱码问题
    JQuery基础
    JavaScript基础笔记
    前端基础之Html、CSS
  • 原文地址:https://www.cnblogs.com/qiangmin/p/4019461.html
Copyright © 2011-2022 走看看