後に表示されます入力が完了したので、ユーザーがテキストの入力を開始した後に表示させたい。メイクのアイコンは、私が変更したい私のアプリケーションでは、この検索バーを持っている入力
アイコンは追加され、別々にスタイルされたSVGです。
私はこれをどうやって行うことができるのか分かりません。私は簡単だと思っていました。「:: after」のようなものを使うことができますが、これは入力フィールドでは不可能です。
Ps .:私はCSSの絶対初心者ですので、慈悲を持ってください。
CSSでは不可能です。 Javascriptを使用する必要があります。 inputはJSで空でないときチェックすることで、アイコンをshows/hides異なるclassesを持っているだろうあなたの条件を達成するために
Javascriptを
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
ベストな方法。
あなたはJSを使用せずに実現したい場合は、inputがフォーカスされたときに隣接するbutton要素をターゲットと::before擬似要素とスタイルを追加することができます。
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
cssのみを使用したい場合は可能です。あなたのコードは、これまでとは何
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}<input id="Search" name="Search" type="search" placeholder="Search" />
？レイアウトフレームワークを使用していますか？ – ino
@ino私は本当にこの質問に答える方法、そのアプリケーション、スタイリングとユーザビリティをmodfiyに担当しています。使用された開発者は、ほとんどのものといくつかのマテリアルUIコンパニオン（これは私が現在「殺す」ことを試みている）に反応します。 –
JSに 'display：none;'を設定すると、 'display'のCSSプロパティを' block'のようなものに設定します。 – Adriani6