web-dev-qa-db-ja.com

入力type = "search"擬似要素ボタン（ 'x'）の編集

素敵に見える検索バーを作成しようとしています。私がしたことは、検索バーの画像を作成し、その画像を入力の背景に追加し、フォントが表示される場所とサイズを編集していることです。編集する方法が見つからない唯一のことは、入力タイプ検索を使用しているときに表示される小さな「x」ボタンです。少し左に移動して、検索バーの画像を修正したいです。

これが私のHTMLです。

<input id="search" name="Search" type="search" value="Search" />

これが私のCSSです：

#search{
    width: 480px;
    height: 49px;
    border: 3px solid black;
    padding: 1px 0 0 48px;
    font-size: 22px;
    color: blue;
    background-image: url('images/search.jpg');
    background-repeat: no-repeat;
    background-position: center;
    outline: 0;
}
csssearchinputwebkitpseudo-element
28
user3139952

Webkitブラウザ（Chrome、Safari、Opera）でのみ使用できる「検索をキャンセル」[X]アイコンについて話していると仮定すると、-webkit-search-cancel-button擬似要素。例えば：

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;    
}

デモ： http://jsfiddle.net/5XKrc/1/ （

このアプローチを使用すると、たとえば次のスタイルのように、独自のキャンセルボタンを作成することもできます。

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;  

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background: red;
}

[X]の代わりに赤い円が作成されます。

デモ http://jsfiddle.net/5XKrc/3/

IE10以降では、次を使用してボタンを移動できます。

#Search::-ms-clear{
   margin-right:20px
}

ああ、placeholder="Search" の代わりに value="Search"-入力が空のときにWordの「検索」を表示し、ユーザーが何かを入力すると自動的に削除します。

40
Yuriy Galanter

[小さな 'x'アイコン]を少し左に移動して、検索バーの画像を修正します。

ユーザーは、物事があまり動かないことを期待しているのがUIです。 「x」アイコンを移動することにした場合は、擬似クラスの使用を検討し、代わりに検索アイコンを移動します。

enter image description hereenter image description here

検索アイコンが埋め込まれている場合、背景画像をrole="presentation"属性を持つ2番目の画像に移動し、マークアップのinputの直後に配置します。

<input id="search" name="Search" type="search" value="Search" />
<svg role="presentation" class="i-search" viewBox="0 0 32 32" width="14" height="14" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
  <circle cx="14" cy="14" r="12" />
  <path d="M23 23 L30 30" />
</svg>

ユーザーが期待する場所に配置します。

#search + svg {
  margin-left: -30px;
  margin-bottom: -2px;
}

次に、 :placeholder-shown 疑似クラスを使用して非表示および表示します。

#search + svg {
  visibility: hidden;
}
#search:placeholder-shown + svg {
  visibility: visible;
}

必要に応じて、「x」アイコンのスタイルを設定できます。しかし、あなたはもうしたくないかもしれません。

2
Josh Habdas