應用焦點樣式提交輸入按鈕

我在我的css代碼中遇到了問題。樣式不適用於我的提交按鈕，而是適用於焦點上的搜索字段。應用焦點樣式提交輸入按鈕

請參閱下面的代碼和屏幕截圖。

有什麼不對？

CSS

.search-form .search-field { 
    height: 10px; 
    display: inline-block; 
    margin: 0; 
    width: 112px!important; 
    border: 1px solid #e4e4e4; 
    border-radius: 2px; 
    padding: 10px 30px 10px 12px; 
} 

.search-form .search-submit { 
    position: absolute; 
    height: 32px; 
    border-right: 1px solid #e4e4e4; 
    border-top: 1px solid #e4e4e4; 
    border-bottom: 1px solid #e4e4e4; 
} 

.search-form .search-field:focus { 
    border: 1px solid #A5E7D6; 

} 


.search-form .search-field:focus + .search-form .search-submit { 

border-right: 1px solid #A5E7D6; 
    border-top: 1px solid #A5E7D6; 
    border-bottom: 1px solid #A5E7D6; 

}

HTML/PHP

<form role="search" method="get" class="search-form" action="<?php echo home_url('/'); ?>"> 
    <label> <span class="screen-reader-text"><?php echo _x('Search for:', 'label') ?></span> 
     <input type="search" class="search-field" placeholder="Suche" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x('Search for:', 'label') ?>" /> </label> 
    <input type="submit" class="search-submit" value=""></input> 
</form>

來源

2017-09-04 mobis

添加您的HTML，所以我們完全可以看到你在做什麼「錯誤」 – Granny

@ user3716569，最好的做法是把你的代碼在origibal後通過[編輯]（https://stackoverflow.com/posts/46036870/edit）它。 – bdkopen

你的CSS是正確的只是在這個改變：.search-form .search-field:focus + .search-submit

.search-form .search-field { 
 
    height: 10px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    width: 112px!important; 
 
    border: 1px solid #e4e4e4; 
 
    border-radius: 2px; 
 
    padding: 10px 30px 10px 12px; 
 
    border-right: none; 
 
} 
 

 
.search-form .search-submit { 
 
    position: absolute; 
 
    height: 32px; 
 
    border-right: 1px solid #e4e4e4; 
 
    border-top: 1px solid #e4e4e4; 
 
    border-bottom: 1px solid #e4e4e4; 
 
    background:transparent; 
 
    border-left: none; 
 
} 
 

 
.search-form .search-field:focus { 
 
    border: 1px solid #A5E7D6; 
 
    outline: none; 
 
    border-right: none; 
 
} 
 

 
.search-form .search-field:focus + .search-submit { 
 
    border-right: 1px solid #A5E7D6; 
 
    border-top: 1px solid #A5E7D6; 
 
    border-bottom: 1px solid #A5E7D6; 
 
    border-left: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<form class="search-form"> 
 
    <input class="search-field" type="text" placeholder="Search" /> 
 
    <button class="search-submit" ><i class="fa fa-search"></i></button> 
 
</form>

來源

2017-09-04 12:24:33

非常感謝。但不幸的是它不起作用。我可以請你看看我的網頁嗎？搜索表單位於右上角。 http://stackoverflow.wedng.de – mobis

@mobis你需要添加提交按鈕標籤... –

從css代碼中刪除（+）運算符。它會正常工作。

.search-form .search-field:focus .search-form .search-submit { 

border-right: 1px solid #A5E7D6; 
    border-top: 1px solid #A5E7D6; 
    border-bottom: 1px solid #A5E7D6; 

}

來源

2017-09-04 12:31:54 nextin

我覺得這是最好的解決辦法

<form class="search-form"> 
    <input class="search-field" type="text" placeholder="Search" /> 
    <button class="search-submit" ><i class="fa fa-search"></i></button> 
</form> 

    <style> 
.search-form .search-field { 
    height: 10px; 
    width: 112px; 
    border: 1px solid #e4e4e4; 
    padding: 10px 30px 10px 12px; 
    border-right: none; 
} 

.search-form .search-submit { 
    position: absolute; 
    height: 32px; 
    border: 1px solid #e4e4e4; 
    background:none; 
    border-left: none; 
} 
.search-form .search-field:focus ,.search-form .search-field:focus + .search-submit { 
    border-color: #A5E7D6 !important; 
    outline: none; 
} 
</style>

來源

2017-09-04 12:56:59

應用焦點樣式提交輸入按鈕

回答

相關問題