如何删除css中搜索图标周围的框？答案

【问题标题】：How to remove the box aorund search icon in css?如何删除css中搜索图标周围的框？
【发布时间】：2015-05-21 05:49:57
【问题描述】：

我已经创建，搜索我的页面的图标，

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Animated search Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    html,
    body {
        margin: 0;
        padding: 0;
    }

    .button,
    .overlay input[type="submit"] {
        background: url(http://s18.postimg.org/f4t3rukcl/icon.png) center center no-repeat;
        height: 50px;
        width: 50px;
        position: absolute;
        top: 50px;
        right: 50px;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: rgba(200, 200, 200, 0.8);
        display: none;
    }

    .overlay input[type="text"] {
        position: absolute;
        top: 50px;
        left: 0;
        height: 50px;
        font-size: 30px;
        width: -webkit-calc(100vw - 100px);
        width: calc(100vw - 100px);
        outline: none;
        background: transparent;
        border: none;
        border-bottom: 2px solid gray;
    }
    </style>
</head>

<body>
    <form action="" autocomplete="on" name="form1" onSubmit="search(document.form1, frametosearch); return false">
        <div class="button"></div>
        <div class="overlay">
            <input type="text" placeholder="enter search and press icon again" id="searchString" />
            <input id="submitSearch" type="submit" value="" />
        </div>
    </form>
    <div class="mainContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae
    </div>
    <script>
    $(document).ready(function() {
        $('.button').click(function() {
            $('.overlay').css("display", "block");
            $('.button').css("display", "none");
        });

        $('#submitSearch').click(function() {
            $('.overlay').css("display", "none");
            $('.button').css("display", "block");
        });

    });
    </script>
</body>

</html>

当我点击图标时，它会在图标周围显示矩形框，

请问如何去除？

谢谢，

【问题讨论】：

我试过了，没用，请问是哪个选择器？谢谢..
可能重复？ stackoverflow.com/questions/3397113/…

标签： html css

【解决方案1】：

这是因为您使输入类型提交。使用border:none 将解决您的问题。

.button, .overlay input[type="submit"]{
    border:none;
}

查看Fiddle

【讨论】：

【解决方案2】：

.overlay input[type="submit"],  .overlay input[type="submit"]:focus {
   outline: none;
   border: none;
}

【讨论】：

【解决方案3】：

将outline: none; 和border: none; 添加到.overlay input[type="submit"] 选择器

【讨论】：

【解决方案4】：

添加

.overlay input[type="submit"] {
   border : 0;
}

见jsfiddle

【讨论】：

【解决方案5】：

会有用的

input[type="submit"]:focus {
   outline: none;
   border: none; // remove the border of the text field 
}

【讨论】：

它将删除文本字段的边框