:after, position. Выравнивание background.

[Michael Myers]

Здравствуйте!

Скачал шаблон один. Очень красивый. Но, как мы знаем, все красивые шаблоны сложные. Вот и возникают трудности.

Я не понимаю ниже приведенного кода. Код относиться к поиску, который можно посмотреть на картинке(http://pbrd.co/1bQ8cbW). А точнее к картинке с лупой. Мне не очень, во-первых, понятно, что придает :after, ведь если его убрать все меняется. Также примечательно, что текст при вводе не налезает на картинку, которая в свою очередь является фоном. По всей видимости это придает как раз таки :after.

И вообще не очень понятны другие правила тоже. Вроде знаю все правила, что означают, но все равно.

На фон ставиться картинка sprites.png(http://pbrd.co/1bQ8ijQ), в которой кроме лупы есть еще и иконки других социальных сетей. Не понятно куда они деваются, и почему остается только лупа.

Объясните пожалуйста!

HTML:

<form class="search">
				    <input type="search"name="search" placeholder="Search">
			    </form>

CSS:

.search{
    width: 195px;
    margin-left: 12.5px;
    padding-top: 25px;
    border-top: solid 1px rgba(0,0,0,0.25);
    box-shadow: none;
    position: relative;
}
.search input{
    width: 153px;
    height: 15px;
    line-height: 1.75em;
    font-size: 11pt;
    letter-spacing: 0;
    font-family: 'Source Sans Pro', sans-serif;
    color: #565656;
    border-radius: 0.4em;
    -webkit-appearance: none;
    border: solid 1px #ddd;
    padding: 0.5em;
    position: relative;
    padding-right: 34px;
}

А вот и самый главный код CSS:

.search:after
{
	    content: '';
	    display: block;
	    position: absolute;
	    top: 72.5%;
	    right: 4px;
	    margin-top: -12px;
	    width: 24px;
	    height: 24px;
	    background-image: url('img/sprites.png');
	    background-position: -96px 0px;
}

[Vladimir T.]

Мне не очень, во-первых, понятно, что придает :after, ведь если его убрать все меняется.

задается фон для формы

Также примечательно, что текст при вводе не налезает на картинку, которая в свою очередь является фоном.

фон не каким образом не связан с полем ввода. также для поля ввода заданы фиксированные размеры.

На фон ставиться картинка sprites.png(http://pbrd.co/1bQ8ijQ), в которой кроме лупы есть еще и иконки других социальных сетей. Не понятно куда они деваются, и почему остается только лупа.

остальные картинки невидны, так как размеры блока 24 на 24

width: 24px;
height: 24px;
background-image: url('img/sprites.png');
background-position: -96px 0px;

[Upcoming]

Michael Myers, по определению псевдоэлемент :after используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Свойство контент обязательное, но так как мы собираемся вставлять после формы изображение, а не текст, его значение будет просто '':

.search:after
{
			 content: '';
}

Далее для показа изображения используется спрайт (хороший материал на эту тему - http://learn.javascr...t.ru/css-sprite):

.search:after
{
			 content: '';
			 display: block;
			 width: 24px;
			 height: 24px;
			 background-image: url('img/sprites.png');
			 background-position: -96px 0px;
}

Ну, и последним делом применяем абсолютное позиционирование к нашему изображению (если непонятно, то разбирайся - http://htmlbook.ru/css/position):

.search:after
{
			 content: '';
			 display: block;
			 width: 24px;
			 height: 24px;
			 background-image: url('img/sprites.png');
             background-position: -96px 0px;
			 position: absolute;
			 top: 72.5%;
			 right: 4px;
			 margin-top: -12px;
}

Edited July 20, 2013 by Upcoming

[Michael Myers]

Ясно. Спасибо. А можно как-то без :after все провернуть?

[Upcoming]

Michael Myers, можно, конечно:

<form class="search">
    <input type="search" name="search" placeholder="Search">
    <input type="image" name="search">
</form>

.search {
    width: 195px;
    margin-left: 12.5px;
    padding-top: 25px;
    border-top: solid 1px rgba(0,0,0,0.25);
    box-shadow: none;
    position: relative;
}
.search input[type="search"] {
    width: 153px;
    height: 15px;
    line-height: 1.75em;
    font-size: 11pt;
    letter-spacing: 0;
    font-family: 'Source Sans Pro', sans-serif;
    color: #565656;
    border-radius: 0.4em;
    -webkit-appearance: none;
    border: solid 1px #ddd;
    padding: 0.5em;
    position: relative;
    padding-right: 34px;
}
.search input[type="image"] {
    display: block;
    position: absolute;
    top: 72.5%;
    right: 4px;
    margin-top: -12px;
    width: 24px;
    height: 24px;
    background-image: url('img/sprites.png');
    background-position: -96px 0px;
}

[Michael Myers]

Тоесть без :after только так?

[Upcoming]

Да нет, вариантов может быть много. Это лишь один из. Который легко было сделать из твоего кода.

[Michael Myers]

Да нет, вариантов может быть много. Это лишь один из. Который легко было сделать из твоего кода.

Спасибо большое за помощь!

[Vulner]

Michael Myers, можно, конечно:

<form class="search">
<input type="search" name="search" placeholder="Search">
<input type="image" name="search">
</form>

.search {
width: 195px;
margin-left: 12.5px;
padding-top: 25px;
border-top: solid 1px rgba(0,0,0,0.25);
box-shadow: none;
position: relative;
}
.search input[type="search"] {
width: 153px;
height: 15px;
line-height: 1.75em;
font-size: 11pt;
letter-spacing: 0;
font-family: 'Source Sans Pro', sans-serif;
color: #565656;
border-radius: 0.4em;
-webkit-appearance: none;
border: solid 1px #ddd;
padding: 0.5em;
position: relative;
padding-right: 34px;
}
.search input[type="image"] {
display: block;
position: absolute;
top: 72.5%;
right: 4px;
margin-top: -12px;
width: 24px;
height: 24px;
background-image: url('img/sprites.png');
background-position: -96px 0px;
}

Можно, а точнее нужно, обойтись без второго инпута и соответственно стилей к нему. Просто прописываем background к тому что у нас имеется А-ля: http://jsfiddle.net/nMrGv/ .