html - 元素中使用背景图片时，input 的上边框变黑；我怎样才能关闭？

Question

我正在尝试重新创建 google 主页的界面(当然减去功能)。我使用 CSS 中的 background-image 将小麦克风图片插入到搜索栏中。但是当我这样做时，边框的顶部明显变暗，并且我无法在编辑类时更改颜色。

我对使用 background-image 属性还很陌生，所以我可能忽略了一些明显的东西。这是相关代码的片段。

CSS

.searchBar{
    width:700px;
    height:40px;

    font-family: arial,sans-serif;
    font-size:18px;

    background-image:url(googleMic.png);
    background-repeat: no-repeat;
    background-position: 670px 9px; 
    background-size: 2.5%;

}

HTML

<center>        
            <img class="googleImg" src="googleLogo.png" alt="google logo">
            <div>
                <input class="searchBar" type="text" name="searchBar">
            </div>
            <span>Google Search</span>
            <span>I'm Feeling Lucky</span>              
</center>

Answer 1

你总是可以添加 border: 1px solid; 到你的 .searchBar CSS 样式:

.searchBar {
    width:700px;
    height:40px;

    font-family: arial,sans-serif;
    font-size:18px;

    background-image:url(googleMic.png);
    background-repeat: no-repeat;
    background-position: 670px 9px; 
    background-size: 2.5%;
    border: 1px solid;

}

<center>        
            <img class="googleImg" src="googleLogo.png" alt="google logo">
            <div>
                <input class="searchBar" type="text" name="searchBar">
            </div>
            <span>Google Search</span>
            <span>I'm Feeling Lucky</span>              
</center>