Wenden Sie Fokusart an, um Eingabeknopf zu senden

Ich habe ein Problem in meinem css Code. Der Stil bezieht sich nicht auf meine Absenden-Schaltfläche, sondern auf das Suchfeld im Fokus.Wenden Sie Fokusart an, um Eingabeknopf zu senden

Siehe meinen Code und Screenshot unten.

Was ist los?

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>

Quelle

2017-09-04 mobis

Ihre HTML-In ist so können wir voll sehen, was Sie „falsch“ – Granny

@ user3716569 tun, die beste Praxis ist der Code in der origibal Post zu setzen durch [Bearbeiten] (https://stackoverflow.com/posts/46036870/edit) es. – bdkopen

Sie CSS wurde korrekt nur in das ändern: .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>

Quelle

2017-09-04 12:24:33

Vielen Dank. Aber leider hat es nicht funktioniert. Darf ich Sie bitten, sich meine Seite anzusehen? Das Suchformular befindet sich in der oberen rechten Ecke. http://stackoverflow.wedng.de – mobis

@mobis Sie müssen hinzufügen Schaltfläche in Tag hinzufügen ... –

Entfernen Sie den Operator (+) aus dem css-Code. Es wird gut funktionieren.

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

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

}

Quelle

2017-09-04 12:31:54 nextin

Ich denke, das beste Lösung

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

Quelle

2017-09-04 12:56:59

Wenden Sie Fokusart an, um Eingabeknopf zu senden

Antwort

Verwandte Themen