Question

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

以下是代码：

<!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>

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

我可以知道，如何删除？

谢谢，

Answer 1

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

Answer 2

添加

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

请参阅jsfiddle

Answer 3

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

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

检查Fiddle

Answer 4

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

Answer 5

它会起作用

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

如何在css中删除框aorund搜索图标？

5 个答案: