1. Zuhause
  2. Frage und Antwort
  3. Eingabe der Benutzersuche für search = "text" mit CSS löschen

Eingabe der Benutzersuche für search = "text" mit CSS löschen

2017-12-14 8 views
1

Ich möchte der vorhandenen Suchfunktion eine klare Eingabetextfunktion hinzufügen. Wenn der Benutzer auf die Kreuz-Animation klickt, sollte er den Eingabetext löschen, anstatt die Pfeile wegzubewegen. Ich habe Anzeige hinzugefügt: keine letzte nicht gültig, aber nicht wie erwartet funktioniert. Kann jemand bitte helfen, diese Funktionalität zu implementieren?Eingabe der Benutzersuche für search = "text" mit CSS löschen

.search-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    border: 2px solid #000; 
 
    border-radius: 20px; 
 
    float:right; 
 
} 
 

 
.search-box input[type="text"] { 
 
    -webkit-appearance: none; 
 
    position: relative; 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 0; 
 
    padding: 5px; 
 
    border: none; 
 
    border-radius: 20px; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
    -webkit-box-shadow: none; 
 
      box-shadow: none; 
 
    z-index: 1; 
 
    -webkit-transition: all 0.5s ease-out 0.5s; 
 
    transition: all 0.5s ease-out 0.5s; 
 
    outline: none; 
 
} 
 

 
.search-box input[type="text"]:focus { 
 
    width: 280px; 
 
    height: 30px; 
 
    margin-right: 20px; 
 
    -webkit-transition: all 0.5s ease-out 0s; 
 
    transition: all 0.5s ease-out 0s; 
 
} 
 

 
.search-box input[type="text"]:focus + span::before { 
 
    height: 14px; 
 
    margin: -22px 0 0 -15px; 
 
    -webkit-transition: all 0.2s ease-out 0.5s; 
 
    transition: all 0.2s ease-out 0.5s; 
 
} 
 

 
.search-box input[type="text"]:focus + span::after { 
 
    visibility: visible; 
 
    margin: -22px 0 0 -15px; 
 
    -webkit-transition: all 0.2s ease-out 0.7s; 
 
    transition: all 0.2s ease-out 0.7s; 
 
} 
 

 
.search-box span { 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    z-index: 10; 
 
} 
 

 
.search-box span::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 2px; 
 
    height: 8px; 
 
    margin: -4px 0 0 0; 
 
    background-color: #000; 
 
    -webkit-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
    -webkit-transition: all 0.2s ease-out 0.2s; 
 
    transition: all 0.2s ease-out 0.2s; 
 
} 
 

 
.search-box span::after { 
 
    content: ''; 
 
    visibility: hidden; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 2px; 
 
    height: 14px; 
 
    margin: -36px 0 0 5px; 
 
    background-color: #000; 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    -webkit-transition: all 0.2s ease-out 0s; 
 
    transition: all 0.2s ease-out 0s; 
 
} 
 

 

 

 
.search-box:not(:valid) ~ span { 
 
\t display: none; 
 
}
<form name="search"> 
 
    <label class="search-box"> 
 
    <input type="text" /> 
 
    <span></span> 
 
    </label> 
 
</form>

https://jsfiddle.net/0wansxza/

Quelle

2017-12-14 Prime

+0

Würden Sie 'type = "search"' betrachten - oder das Hinzufügen von 'for = "search"' auf dem Etikett für die Zugänglichkeit? – sol

Antwort

2

Sie es mit diesem $('#element').val(''); jQuery tun könnte.

jQuery(document).ready(function(){ 
 
jQuery('.search-box input[type="text"]').focusout(function() { 
 
    jQuery(this).val(''); 
 
}) 
 
});
.search-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    border: 2px solid #000; 
 
    border-radius: 20px; 
 
    float:right; 
 
} 
 

 
.search-box input[type="text"] { 
 
    -webkit-appearance: none; 
 
    position: relative; 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 0; 
 
    padding: 5px; 
 
    border: none; 
 
    border-radius: 20px; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
    -webkit-box-shadow: none; 
 
      box-shadow: none; 
 
    z-index: 1; 
 
    -webkit-transition: all 0.5s ease-out 0.5s; 
 
    transition: all 0.5s ease-out 0.5s; 
 
    outline: none; 
 
} 
 

 
.search-box input[type="text"]:focus { 
 
    width: 280px; 
 
    height: 30px; 
 
    margin-right: 20px; 
 
    -webkit-transition: all 0.5s ease-out 0s; 
 
    transition: all 0.5s ease-out 0s; 
 
} 
 

 
.search-box input[type="text"]:focus + span::before { 
 
    height: 14px; 
 
    margin: -22px 0 0 -15px; 
 
    -webkit-transition: all 0.2s ease-out 0.5s; 
 
    transition: all 0.2s ease-out 0.5s; 
 
} 
 

 
.search-box input[type="text"]:focus + span::after { 
 
    visibility: visible; 
 
    margin: -22px 0 0 -15px; 
 
    -webkit-transition: all 0.2s ease-out 0.7s; 
 
    transition: all 0.2s ease-out 0.7s; 
 
} 
 

 
.search-box span { 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    z-index: 10; 
 
} 
 

 
.search-box span::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 2px; 
 
    height: 8px; 
 
    margin: -4px 0 0 0; 
 
    background-color: #000; 
 
    -webkit-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
    -webkit-transition: all 0.2s ease-out 0.2s; 
 
    transition: all 0.2s ease-out 0.2s; 
 
} 
 

 
.search-box span::after { 
 
    content: ''; 
 
    visibility: hidden; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 2px; 
 
    height: 14px; 
 
    margin: -36px 0 0 5px; 
 
    background-color: #000; 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    -webkit-transition: all 0.2s ease-out 0s; 
 
    transition: all 0.2s ease-out 0s; 
 
} 
 

 

 

 
.search-box:not(:valid) ~ span { 
 
\t display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="search"> 
 
    <label class="search-box"> 
 
    <input type="text" /> 
 
    <span></span> 
 
    </label> 
 
</form>

Quelle

2017-12-14 21:27:09

0

mit nur CSS. Ich musste dein Markup etwas modifizieren. Um das Eingabefeld zu löschen, musste ich eine Schaltfläche hinzufügen, die das Formular beim Anklicken zurücksetzt. Sehen Sie meinen Code und Kommentare unten. Hoffe, es hilft

.search-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    border: 2px solid #000; 
 
    border-radius: 20px; 
 
    float:right; 
 
} 
 

 
.search-box input[type="text"] { 
 
    -webkit-appearance: none; 
 
    position: relative; 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 0; 
 
    padding: 5px; 
 
    border: none; 
 
    border-radius: 20px; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
    -webkit-box-shadow: none; 
 
      box-shadow: none; 
 
    z-index: 11;/**Changed This**/ 
 
    -webkit-transition: all 0.5s ease-out 0.5s; 
 
    transition: all 0.5s ease-out 0.5s; 
 
    outline: none; 
 
} 
 
/**Updated the below codes**/ 
 
.search-box input[type="text"]:focus, 
 
.search-box .btn:focus + input{ 
 
    width: 280px; 
 
    height: 30px; 
 
    margin-right: 30px; 
 
    -webkit-transition: all 0.5s ease-out 0s; 
 
    transition: all 0.5s ease-out 0s; 
 
} 
 
/**Updated the below codes**/ 
 
.search-box input[type="text"]:focus + span::before, 
 
.search-box .btn:focus + input[type="text"] + span::before{ 
 
    height: 14px; 
 
    margin: -22px 0 0 -15px; 
 
    -webkit-transition: all 0.2s ease-out 0.5s; 
 
    transition: all 0.2s ease-out 0.5s; 
 
} 
 
/**Updated the below codes**/ 
 
.search-box input[type="text"]:focus + span::after, 
 
.search-box .btn:focus + input[type="text"] + span::after{ 
 
    visibility: visible; 
 
    margin: -22px 0 0 -15px; 
 
    -webkit-transition: all 0.2s ease-out 0.7s; 
 
    transition: all 0.2s ease-out 0.7s; 
 
} 
 

 
.search-box span { 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    z-index: 10; 
 
} 
 

 
.search-box span::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 2px; 
 
    height: 8px; 
 
    margin: -4px 0 0 0; 
 
    background-color: #000; 
 
    -webkit-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
    -webkit-transition: all 0.2s ease-out 0.2s; 
 
    transition: all 0.2s ease-out 0.2s; 
 
} 
 

 
.search-box span::after { 
 
    content: ''; 
 
    visibility: hidden; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 2px; 
 
    height: 14px; 
 
    margin: -36px 0 0 5px; 
 
    background-color: #000; 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    -webkit-transition: all 0.2s ease-out 0s; 
 
    transition: all 0.2s ease-out 0s; 
 
} 
 
/** 
 
.search-box:not(:valid) ~ span { 
 
\t display: none; 
 
}**/ 
 

 
/**Added the below codes**/ 
 
.search-box .btn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: transparent; 
 
    border: 0; 
 
    outline: 0; 
 
    width: 30px; 
 
    cursor: pointer; 
 
    z-index: 11; 
 
}
<form name="search"> 
 
    <label class="search-box"> 
 
    <!--Added the button to clear the field on click--> 
 
    <button class="btn" type="reset"></button> 
 
    <input type="text" /> 
 
    <span></span> 
 
    </label> 
 
</form>

Quelle

2017-12-15 14:53:47 blecaf

Verwandte Themen

 Verwandte Themen