当元素中使用背景图像时，输入的上边框变黑;我怎么能关掉？

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样式中：

＆＃13;

＆＃13;

.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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;