Как выбрать желаемое изображение из CSS спрайтов на фоне DIV и расположить его?

0

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

Изображение 174551

Есть некоторые ограничения, как я могу только редактировать или добавлять больше CSS, и я не могу редактировать поиск. Введите тег, а также не могу добавить больше элемента вокруг тега ввода, такого как DIV, SPAN, P, B и т.д. С этой целью я написал код, который находится в прямом эфире на www.jsfiddle.net/JFx9g.

Это возможно или нет? Можете ли вы изменить это?

  • 0
    откуда это изображение? поиск изображения
  • 0
    В этом случае вы должны расположить иконки в спрайтах вертикально. А затем код CSS соответственно.
Показать ещё 8 комментариев
Теги:
background
image
sprite

3 ответа

0
Лучший ответ

Поскольку я думаю, что это невозможно сделать, как я попросил, поэтому я попытался сделать это с помощью как можно более короткого кода, а затем получил следующий. Это также можно найти на www.jsfiddle.net/JFx9g/18/

<style type="text/css">
.search_text {
    position: relative;
}
.search_text:after {
    content: "";
    position: absolute;
    top: -3px;
    right: 7px;
    width: 19px;
    height: 19px;
    background: url(http://i.imgur.com/BX2OXxc.png) -19px -2px no-repeat;
}
.search_text_input {
    height: 24px;
    width: 450px;
}
</style>
<span class="search_text">
<input class="search_text_input" name="q" type="text" value=""/>
</span>
Поделиться
0

http://jsfiddle.net/vikramjakkampudi/W2Cnc/

input{
height:30px;
}

 .inputImage {
        background-position: 100% center;
        background-clip: border-box;
        background-attachment: scroll;
        background-origin: padding-box;
        background-image: url("your image url");
        background-repeat: no-repeat;
        background-size: 8px auto;
        cursor: pointer;
        width: 93.5% !important;
        padding-right: 5%;
    }

добавьте этот css и назначьте класс inputImage в поле ввода

Поделиться
  • 0
    Ваш код совершенно не в мире. Сначала попробуйте FIDDLE, а затем поделитесь.
  • 0
    Хотите увидеть ваш код на FIDDLE ...
Показать ещё 4 комментария
0

попробуйте это (я также обновил скрипку)

<div class='search_input_container'>
    <input class="search_input" name="q" type="text" value=""/>
    <div class='search_glass'></div>
</div>

CSS

.search_input_container{
    width:450px;
    height:30px;
    border:1px solid #ccc;
    display:table;
}
.search_input{
    border:none;
    padding:5px;
    width:90%;
    outline:none;
    display:table-cell;
}
.search_glass{
    border:none;
    width:18px;
    height:20px;
    background: url(http://i.imgur.com/BX2OXxc.png);
    background-repeat: no-repeat;
    background-position: -20px 0px;
    display:table-cell;
}

Новый отредактированный JSFIDDLE: http://jsfiddle.net/JFx9g/10/

Поделиться
  • 0
    Это работает, но я не хочу редактировать свой HTML-код или добавлять новый HTML-код, и вы добавили два DIV ... :(
  • 0
    хорошо, вы можете изменить фоновое изображение
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню