CSSを使用してsearch = "text"のユーザー検索入力をクリアする

Question

既存の検索機能に明確な入力テキスト機能を追加したいと思います。ユーザーが十字アニメーションをクリックすると、矢印を移動させる代わりに入力テキストを消去する必要があります。私は表示を追加しました：最後に有効ではありませんが、期待どおりに動作しません。誰かがこの機能を実装する方法を手伝ってください。

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

Answer 1

あなたはその$('#element').val('');でのjQueryを使用してそれを行うことができます。ただ、CSSを使用した

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>

Answer 2

。あなたのマークアップを少し修正しなければならなかった。入力フィールドをクリアするには、クリックしたときにフォームをリセットするボタンを追加する必要がありました。以下の私のコードとコメントを見てください。それは

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