2015-12-08 4 views
0

Проблема, с которой я столкнулась, - это изображение, которое я хотел бы появиться рядом со строкой поиска по умолчанию «поиск». Несмотря на то, что я закодирован в URL-адресе для изображения, которое я хотел бы отобразить, изображение не появляется. Я установил пользовательскую панель поиска, следуя инструкциям в этом уроке - http://www.bloominrouge.com/2015/01/a-simple-and-sleek-search-bar-widget.html.Изображение не отображается в панели навигации на повороте

Ниже я включил всю кодировку для панели поиска:

<style> 

    #search {  
    background: url (https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png) 98% 50% no-repeat; 
    text-align: left; 
    margin-right:-4%; 
    width: 100%; 
    float:right; 
    max-width: 210px; 
    border: 0; 
    } 
    #searchform { 
    height: 20px; 
} 
#search #s { 
    background: #f8f8f8; 
    color: #333333; 
    font-size: 10px!important; 
    font-family: karla, arial; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-weight: normal; 
    letter-spacing: 0.09em; 
    border: 0; 
    width: 60%; 
    padding: 0; 
    margin: 0; 
    outline: none; 
    position: relative; 
    top: 9px; 
    padding-left: 6px; 
    } 

</style> 

<div id='search' title='Type and hit enter'> 
    <form action='/search' id='searchform' method='get'> 
    <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/> 
    </form> 
</div> 
<br/><br/> 

Я примеряла несколько раз для настройки поля и отступы нумераций, чтобы увидеть, если большое количество маржинальных и заполняющих элементов не являются мешая изображению, но безрезультатно. Я также попытался вставить разные изображения, но даже это не сработало.

ответ

1

Здесь вы идете:.

#search {  
    background: url(https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png); 
    background-repeat:no-repeat; 
    background-position:98% 5px; 
    text-align: left; 
    width: 100%; 
    float:right; 
    max-width: 210px; 
    border: 0; 
    } 

#search #s { 
    background: #f8f8f8; 
    color: #333333; 
    font-size: 10px!important; 
    font-family: karla, arial; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-weight: normal; 
    letter-spacing: 0.09em; 
    border: 0; 
    width: 60%; 
    padding: 0; 
    margin: 0; 
    outline: none; 
    position: relative; 
    top: 0px; 
    padding-top:9px; 
    padding-left: 6px; 
    } 

Пространства между URL и (необходимо стиранием и top:9px нуждалось изменения, как он спрятал все, что захлестнуло

+0

https://jsfiddle.net/g5L6tvr3/ – David

+0

Дэвид ответил на вопрос правильно. Пока есть место - это недопустимый атрибут. К сожалению, даже с этим исправлением, похоже, что значок немного отклоняется от самого окна поиска. Хотя это не мое место, я порекомендовал бы разместить его внутри самого элемента ввода? - см. [эта ссылка JSBin] (https://jsbin.com/xodebelaja/edit?html,css,outpu t) как это будет выглядеть. –

Смежные вопросы