zoukankan      html  css  js  c++  java
  • CSS动态实现文本框清除按钮的隐藏与显示

    当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。

    借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框

    如下css:

    .input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
    .clear { display: none; position: absolute;  16px; height: 16px; margin: 6px 0 0 -20px; background: url(clear.png);}
    .input::-ms-clear { display: none; }
    .input:valid + .clear { display: inline; }
    

    如下html:

    输入任意内容:<input class="input" required><a class="clear"></a>
    

      

    然后就有类似下面截图的效果了(均截自FireFox浏览器):

    FireFox下清除按钮状态截图1

    FireFox下清除按钮状态截图2

    实现原理

    HTML部分:

    因为search类型文本框在Chrome/Opera/Safari下尺寸不好控制,因此使用缺省的类型(也就是text类型);
    required是必要属性,配合CSS伪类实现我们的效果。

    CSS部分:

    使用的是:valid伪类。这是CSS3中新增伪类,IE10+以及其他现代浏览器支持,表示表单合法。由于HTML中的<input>有HTML5表单验证属性required. 于是,如果文本框没有内容,则不合法;有内容,则合法,就会触发这里的:valid伪类选择器。而这里:valid伪类控制后面的清除按钮显示,于是就实现了我们想要的效果。

    啊,对了。IE11浏览器下不是所有的文本框都有黑色的叉叉吗,会跟这里的自定义清除按钮重叠,::-ms-clear { display: none; }这段代码可以去之~~

    实现的优点
    此方法相比传统JS实现的好处在于,更简单了。JS的话还要侦听输入事件(input)等,比较折腾。CSS的话完全浏览器自身事件特性,显然,高效简单的多。

    实现的不足
    不足在于,兼容性。IE9-以下的浏览器只能点蜡烛了。

    注意:点击叉叉是不会清除的,本文只是输入控制显隐!!

  • 相关阅读:
    POJ 2175 Evacuation Plan 费用流 负圈定理
    POJ 2983 Is the Information Reliable? 差分约束
    codeforces 420B Online Meeting
    POJ 3181 Dollar Dayz DP
    POJ Ant Counting DP
    POJ 1742 Coins DP 01背包
    中国儒学史
    产品思维30讲
    Java多线程编程核心技术
    编写高质量代码:改善Java程序的151个建议
  • 原文地址:https://www.cnblogs.com/refe/p/5220999.html
Copyright © 2011-2022 走看看