Как изменить положение стрелочки в section?

Question

[Иван Иванов]

Здравствуйте, прошу прощения за глупый вопрос, но я никогда не сталкивался с такой тривиальной задачей... Заказчик докопался до стрелочки в выпадающем списке... выглядит сейчас она вот так:



а должна выглядеть вот так:



как видите, стрелочка должна быть чуть ниже. То есть ровно по центру строки... Как такое сделать не могу понять... Нашёл вариант, что можно убрать стандартную стрелку и поставить новую и ей задать position, но может быть есть более простой вариант?

Answer 1

[ixon]

Такая стрелочка называется caret, обычно её делают использую псевдоклассы ::before & ::after, нужно найти что именно её задаёт, найти у этого элемента эти псевдоклассы и изменить в них свойства left и top.

Comments

[Иван Иванов]

значит всё таки только через псевдоклассы... я думал возможно существует какое-то css свойство, которое непосредственно на неё влияет. Хорошо тогда придётся делать так.

[ixon]

Иван Иванов, свойство этого элемента это, подозреваю, только left и top.

[Иван Иванов]

ixon, спасибо, сделал через псевдоклассы, всё работает отлично )

Answer 2

[Максим Тимофеев]

миллион способов, можно сократить значительную часть вариантов, если понять каким образом сверстана Ваша стрелочка. Если исходить из того что Вы дали (картинка), то ответ: открыть картинку в редакторе типа paint.net, вырезать область , подвинуть ниже.
Если интересует html и css, как Вы в тегах указали, то неплохо бы было привести html и css.

Comments

[Иван Иванов]

<select class="product-sort-mode" name="product-sort-mode" id="" onChange="newSort($(this));" class="select-custom">
					<option <?=($_GET["product-sort-mode"]=="popular")?"selected":""?> value="popular"><?=GetMessage("PAGE_SORT_BY_POPULAR")?></option>
					<option <?=(!isset($_GET["product-sort-mode"]) || $_GET["product-sort-mode"]=="new")?"selected":""?> value="new"><?=GetMessage("PAGE_SORT_BY_NEW")?></option>
					<option <?=($_GET["product-sort-mode"]=="price_asc")?"selected":""?> value="price_asc"><?=GetMessage("PAGE_SORT_BY_PRICE_ASC")?></option>
					<option <?=($_GET["product-sort-mode"]=="price_desc")?"selected":""?> value="price_desc"><?=GetMessage("PAGE_SORT_BY_PRICE_DESC")?></option>
				</select>

вот так свёрстана. Эта стрелочка стандартная...

.product-sort-mode{
	border:none;
	color:#a160b9;
	font-size:24px;
	font-family: 'Open Sans', sans-serif;
}

[Максим Тимофеев]

Иван Иванов,
1. нет, это стиль для всего select
2. зачем мне php? Дайте html который в итоге получился, что бы я не глядел в кофейную гущу, пытаясь догадаться, что переменные Ваши содержат.

Answer 3

[Andrej Sharapov]

Самый простой способ, это изменить ее через псевдоклассы. Ну или поставить свой background