Клуб Яндекс.Поиска для сайта

Стилизация поиска как на Яндекс, готовые стили

stihirf
10 октября 2014, 16:35

Здравствуйте! Я могу вам сообщить, что управлять стилями поиска реально очень тяжело, так как подгружается сторонний css с сервера яндекс, который многие опции делает невозожными для изменения.

На данный момент это не является причиной обращения, так как все нужные стили мы настроили.

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

Не могли бы вы открыть секрет и сбросить готовый css, выполняющий такую задачу для нашего сайта?

Попытки сделать это слишком трудные, делали с помощью http://cssarrowplease.com/ но ничегоэто не дало. Конкретно был вставлен код:

.ya-site-form__submit {
position: relative;
background: #e0e019;
border: 4px solid #c2e1f5;
}
.ya-site-form__submit:after, .ya-site-form__submit:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.ya-site-form__submit:after {
border-color: rgba(224, 224, 25, 0);
border-left-color: #e0e019;
border-width: 15px;
margin-top: -15px;
}
.ya-site-form__submit:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 21px;
margin-top: -21px;
}

Этот код не сработал.

Сайт: с-т-и-х-и.рф

7 комментариев

Добрый день!

Если хотите именно желтую стрелочку, как на Яндексе, то, возможно, вам подойдут те настройки, которые есть по умолчанию в разделе «Форма поиска»:  https://yadi.sk/i/S6ikyOHjbvWWi ? Или по какой-то причине нужно что-то другое?

спасибо! ваш ответ устроил. И теперь видно, что сервис действительно продуман в мелочах.

Возможно вы поможете решить проблему до конца:

сейчас стрелочка является неактивным элементом. нужно чтобы кнопка найти занимала всю розовую область: от области ввода и до последнего розового пикселя стрелки на нашем сайте с-т-и-х-и.рф

Также всплывающий блок подсказок стал прозрачным, так как было добавлено свойство для кнопки Найти background: none; 

Подскажите как называется выплывающий элемент подказок, как к нему обратися, чтобы поставить своство background: #fff;  ??

область подсказок нашлась, её стиль был добавлен так:
#ya-site-form0 .ya-site-suggest-list {background:#fff;}
проблема прозрачной области подсказок решена
stihirf,
Спасибо!

и также интересует эффект по нажатию на кнопку Найти.

Сейчас получается что розовая кнопка получает синий бордюр при нажатии. Вы могли бы открыть секрет как сделать такой же эффект как на стрелке в поиске яндекс - то есть желтая стрелка становится чуть темнеепри нажатии. Как это реализовать в нашем случае? например при нажатии цвет стрелки и кнопки #E78199

размер кнопки найти я исправил, растягивать на всю область розовую не нужно - оказывается  достаточно было добавить

#ya-site-form0 .ya-site-form__arrow-wrap {width: 9px !important;}

и это сделало размер стрелки меньше, как раз.

обводка кнопки найти синим исправлена, убрана по совету на форуме http://web-silver.ru/forum/html-css-javascript/14292-kak-ispravit-vid-knopki-pri-ee-nazhatii.html#post123106

то есть кодом:

a, :focus {

   outline: none;

}

button::-moz-focus-inner,

input[type="reset"]::-moz-focus-inner,

input[type="button"]::-moz-focus-inner,

input[type="submit"]::-moz-focus-inner,

select::-moz-focus-inner,

input[type="file"] > input[type="button"]::-moz-focus-inner {border: none;}

------

остается только вопрос: как же можно сделать темнее бэкграунд кнопки и стрелки при нажатии найти?

Добрый день! Простите за задержку с ответом, сейчас посмотрим и отпишемся.