google-chrome - 在 Windows 8 Chrome 中搜索框样式搞砸了？

Question

我刚刚向搜索框添加了一些样式，使边 Angular 变圆并添加了更多效果。在 Linux 下的 Chrome 和 firefox 中尝试该站点时，一切正常。它在 IE 10(Windows 8)中也能正常工作。但在 Windows 8 Chrome(不是 Metro 版本)中，样式变得一团糟!为什么？这是我添加的样式:

    #top-search {
        border: 1px solid #BABABA;
        -webkit-border-radius: 18px 18px 18px 18px;
        -moz-border-radius: 18px 18px 18px 18px;
        -o-border-radius: 18px 18px 18px 18px;
        border-radius: 18px 18px 18px 18px;
        box-shadow: 0 0 4px #CFCFCF;
        color: #696969;
        float: right;
        font-size: 11px;
        margin-right: 2%;
        margin-top: 8px;
        opacity: 0.7;
        padding: 3px 3px 3px 7px;
        width: 6%;
        outline: none;
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        &:hover, &:focus, {
            opacity: 1;
            width: 8%;
        }
    }

这是搜索框的显示方式:

Answer 1

简单地将输入类型从“搜索”更改为“文本”