2
拡張可能なCSS検索フィールドがありますが、検索アイテムが前の2つのアイコンに行き渡り、左に押さないようにします。私は検索フォームに高いz-インデックス値を、アイコンに低い値を適用することでこれを達成することができましたが、残念ながら、私は何かを見逃しています。拡張可能CSS検索フィールド
ここに私が何を試みているかを見るためのリンクがあります。 TIAの助けを借りて！ここで
https://codepen.io/anon/pen/Qprjjw#anon-login
ここでHTML
<h3>Search Demo</h3>
<div class="right">
<img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" />
<img src="http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png" alt="" width="" height="" border="" align="" />
<form id="search">
<input type="search" placeholder="Search">
</form>
</div>
は、あなたがクラスrightでのdivにposition: absolute;相対で画像を配置することができCSS
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
.right { float: right}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
/*
input {
outline: none;
}
*/
input[type=search] {
outline: none;
color: #4a83c0;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #4a83c0;
}
input::-webkit-input-placeholder {
color: #4a83c0;
}
/* Demo */
#search { display:inline-block;}
#search input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#search input[type=search]:hover {
background-color: #fff;
}
#search input[type=search]:focus {
width: 600px;
padding-left: 32px;
color: #4a83c0;
background-color: #fff;
cursor: auto;
}
#search input:-moz-placeholder {
color: transparent;
}
#search input::-webkit-input-placeholder {
color: transparent;
}
ありがとうございます。しかし、私のコードで実際に使用している画像は、動的な幅が異なります。実際には、アンカータグの幅に（テキストに基づいて）ピクセル値を持たない背景イメージがあります。それは理にかなっていますか？ – soire
すべての画像は、HTMLの任意の要素のバックグラウンドで使用されていても、その幅のピクセル値を持っています。 うまく動作しない場合は、使用したアンカータグの幅を変更してみてください。それに応じて、背景の画像も変更される可能性があります。 –