html给文本输入框添加自定义的清除按钮

使用HTML 5,如果对清除按钮的样式不介意的话,可以使用search类型的输入框,它会提供一个默认的清除按钮

<input type="search" placeholder="搜索" />

如果想自定义清除按钮,则需要自己实现,这里使用jquery给出一个实现的方案:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Clear Input Demo</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.clearable').wrap('<span class="clear-box" />')
                                        .after($('<span></span>')
                                        .click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));

            });
        </script>
        <style>
            span.clear-box {
                position: relative;
            }
            span.clear-box span {
                position: absolute;
                display: block;
                top: 4px;
                right: 0px;
                width: 18px;
                height: 18px;
                color: #fff;
                background: #999;
                cursor: pointer;
            }
            span.clear-box span:after{
              position: absolute;
              top: 1px;
              right: 2px;
              content: "\274c";
              font-size: .8em;
            }
            
            span.clear-box input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="clearable">
    </body>
</html>

版权声明:著作权归作者所有。

相关推荐

C#给文档注释添加换行

错误用法:使用<br />/// 第一行 /// <br /> /// 第二行 显示出来没有效果。正确做法:使用<para>/// <summary> /// <para>第一行</para> /// <para>第二行</par

Swift修改UISearchBar上取消按钮文本的颜色

Swift 2,3,4在语法上少有不同,以下是各个Swift版本修改取消按钮文本颜色的代码片段Swift 4.0let cancelButtonAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]  UIBarButtonItem.appearan

使用RecyclerView和LayoutAnimation给列表添加进入动画

这里讲解下使用RecyclerView和LayoutAnimation给列表添加进入动画。分为三个步骤:给列表项添加动画使用列表项的动画定义LayoutAnimationRecyclerView应用LayoutAnimation的动画使用LayoutAnimation定义动画的好处是,它是单独定义,可以应用于任何ViewGroup的子类。这里是以RecyclerView为示例。示例效果示例是一个向

Swift 4转换html为字符串文本

Swift 4可以添加extension来把html转换为字符串。String添加扩展extension String {     var html2AttributedString: NSAttributedString? {       

Html5使用CSS修改输入框的placeholder颜色

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。兼容多个浏览器的方法:::-webkit-input-placeholder { /* WebKit, Blink, Edge */     color: