0

标题说明了一切，我想从菜单栏中删除搜索图标并将其简单地替换为“搜索”一词

我的style.css样子是这样的：

.site-header .search-field {
    background-color: transparent;
    /*background-image: url(images/search-icon.png);*/
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 3px 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
    z-index: 1000;
}

在任何文件中，我都找不到指向该search-icon.png图像的链接。

搜索图标

带有文本框的搜索图标

位置不好

最后一个屏幕截图显示搜索框已下拉。如何将它与其他菜单项水平对齐，尽可能远离菜单允许的右侧？

用于生成 nag-menu 的 CSS 是：

/**
 * 4.2 Navigation
 * ----------------------------------------------------------------------------
 */

.main-navigation {
    z-index: 1000;
    clear: both;
    margin: 0 auto;
    /*max-width: 1920px;*/
    max-width: 1080px;
    min-height: 45px;
    position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
    margin: 0;
    padding: 0 40px 0 0;
}

.nav-menu li {
    display: inline-block;
    position: relative;
}

.nav-menu li a {
    color: #3c3c3c;
    display: block;
    font-size: 15px;
    /*line-height: 1;*/
    /*padding: 15px 20px;*/
    text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
    /*background-color: #220e10;*/
    /*background-color: #333333;*/
    color: #666;
}

.nav-menu .sub-menu,
.nav-menu .children {
    /*background-color: #220e10;*/
    background-color: #ffffff;
    /*border: 2px solid #f7f5e7;*/
    border: 2px solid #ffffff;
    border-top: 0;
    display: none;
    padding: 0;
    position: absolute;
    left: -2px;
    z-index: 1000;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    top: 100%;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
    border-left: 0;
    left: 100%;
    top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
    color: #3c3c3c;
    margin: 0;
    width: 200px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
    /*background-color: #db572f;*/
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
    display: block;
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
    /*background-color: #666;*/

    color: #666;
    /*font-style: italic;*/
}

/* Arrow underneath */

/*
.nav-menu .current_page_item > a:after,
.nav-menu .current_page_ancestor > a:after,
.nav-menu .current-menu-item > a:after,
.nav-menu .current-menu-ancestor > a:after {
    width: 0;
    height: 0;
    position: absolute;
    content:"";
    display:block;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #666;

    left: 50%;

    margin-left: -6px;
}
*/

.menu-toggle {
    display: none;
}

/* Navbar */
.navbar {
    /*background-color: #f7f5e7;*/
    /*background-color: #fff;*/
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
}

.site-header .search-form {
    position: absolute;
    right: 20px;
}

.site-header .search-field {
    background-color: transparent;
    /*background-image: url(images/search-icon.png);*/
    /*background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;*/
    border: none;
    cursor: pointer;
    /*height: 37px;*/
    margin: 0 auto;
    /*padding: 0 0 0 34px;*/
    position: relative;
    /*-webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;*/
    /*width: 0;*/
    width: 120px;
    min-height: 45px;
    z-index: 1000;
}

.site-header .search-field:focus {
    /*background-color: #fff;*/
    /*border: 2px solid #c3c0ab;*/
    /*border: 1px solid #666666;*/
    cursor: text;
    outline: 0;
    color: #666666;
    /*width: 230px;*/
}
4

1 回答 1

1

编辑：

老实说，您要做的就是将 更改width为大约 >100px 并删除background-img. 这将显示占位符文本，当您单击它时，它将像以前一样启动动画。

于 2013-10-03T22:56:23.787 回答