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

Скругление углов поля поиска

Алексей Хорошевский
5 ноября 2014, 14:38

Здравствуйте. Не смог решить банальную задачу - скруглить углы формы поиска. Сайт http://aleksius.com/. Не могу понять, куда надо добавит "border-radius: 4px;", чтобы было так как с другими полями ввода на сайте.Если не сложно, помогите, пожалуйста.

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

<div class="ya-site-form ya-site-form_inited_no" onclick="return {'action':'http://aleksius.com/rezultaty-poiska','arrow':false,'bg':'transparent','fontsize':15,'fg':'#000000','language':'ru','logo':'rb','publicname':'Поиск по Aleksius.com','suggest':true,'target':'_self','tld':'ru','type':2,'usebigdictionary':true,'searchid':2136975,'webopt':false,'websearch':false,'input_fg':'#000000','input_bg':'#ffffff','input_fontStyle':'normal','input_fontWeight':'normal','input_placeholder':'','input_placeholderColor':'#000000','input_borderColor':'#b4c1c4'}"><form action="http://yandex.ru/sitesearch" method="get" target="_self"><input type="hidden" name="searchid" value="2136975"/><input type="hidden" name="l10n" value="ru"/><input type="hidden" name="reqenc" value="utf-8"/><input type="text" name="text" value=""/><input type="submit" value="Найти"/></form></div><style type="text/css">.ya-page_js_yes .ya-site-form_inited_no { display: none; }</style><script type="text/javascript">(function(w,d,c){var s=d.createElement('script'),h=d.getElementsByTagName('script')[0],e=d.documentElement;if((' '+e.className+' ').indexOf(' ya-page_js_yes ')===-1){e.className+=' ya-page_js_yes';}s.type='text/javascript';s.async=true;s.charset='utf-8';s.src=(d.location.protocol==='https:'?'https:':'http:')+'//site.yandex.net/v2.0/js/all.js';h.parentNode.insertBefore(s,h);(w[c]||(w[c]=[])).push(function(){Ya.Site.Form.init()})})(window,document,'yandex_site_callbacks');</script>
<style>#ya-site-form0 .ya-site-form__submit:hover{cursor: pointer;text-align: center;vertical-align: middle;border-radius: 10px 10px 10px 10px;box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);background: -webkit-linear-gradient(top, #CFEEF7 0, #FFFFFF 15%, #8ED7EB 50%, #56C3E1 50%, #9BDCED 100%) no-repeat;background: -moz-linear-gradient(top, #CFEEF7 0, #FFFFFF 15%, #8ED7EB 50%, #56C3E1 50%, #9BDCED 100%) no-repeat;background: -o-linear-gradient(top, #CFEEF7 0, #FFFFFF 15%, #8ED7EB 50%, #56C3E1 50%, #9BDCED 100%) no-repeat;background: -ms-linear-gradient(top, #CFEEF7 0, #FFFFFF 15%, #8ED7EB 50%, #56C3E1 50%, #9BDCED 100%) no-repeat;background: linear-gradient(to bottom, #CFEEF7 0, #FFFFFF 15%, #8ED7EB 50%, #56C3E1 50%, #9BDCED 100%) no-repeat;-svg-background: linear-gradient(top, #CFEEF7 0, #FFFFFF 15%, #8ED7EB 50%, #56C3E1 50%, #9BDCED 100%) no-repeat;border: 1px solid #B4C1C4;}</style>

 

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

<style>#ya-site-form0 .ya-site-form__input-text,#ya-site-form0 .ya-site-form__input-text_type_hint{color: red !important;}#ya-site-form0 .ya-site-form__submit{cursor: pointer;text-align: center;vertical-align: middle;border-radius: 10px 10px 10px 10px;box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);background: linear-gradient(top, #ADE2F0 0, #D8F1F8 15%, #6CCBE5 50%, #33B7DB 50%, #74CEE7 100%) no-repeat;background: -webkit-linear-gradient(top, #ADE2F0 0, #D8F1F8 15%, #6CCBE5 50%, #33B7DB 50%, #74CEE7 100%) no-repeat;background: -moz-linear-gradient(top, #ADE2F0 0, #D8F1F8 15%, #6CCBE5 50%, #33B7DB 50%, #74CEE7 100%) no-repeat;background: -o-linear-gradient(top, #ADE2F0 0, #D8F1F8 15%, #6CCBE5 50%, #33B7DB 50%, #74CEE7 100%) no-repeat;background: -ms-linear-gradient(top, #ADE2F0 0, #D8F1F8 15%, #6CCBE5 50%, #33B7DB 50%, #74CEE7 100%) no-repeat;background: linear-gradient(top, #ADE2F0 0, #D8F1F8 15%, #6CCBE5 50%, #33B7DB 50%, #74CEE7 100%) no-repeat;-svg-background: linear-gradient(top, #ADE2F0 0, #D8F1F8 15%, #6CCBE5 50%, #33B7DB 50%, #74CEE7 100%) no-repeat;border: 1px solid #B4C1C4; }#ya-site-form0 .ya-site-suggest__iframe {position: absolute;background: #E6F6FB !important;color: #D3EFF7 !important;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif !important;z-index: 800;}#ya-site-form0 .ya-site-suggest-elem:hover, html body #ya-site-form0 .ya-site-suggest-elem_state_hover{color: #FFFFFF !important;background: #74CEE7 !important;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif !important;}</style>

 

 

1 комментарий
Подписаться на комментарии к посту
firstlena.pershina
5 ноября 2014, 15:12

Добрый день!

Нужно добавить  #ya-site-form0 .ya-site-form__form .ya-site-form__input-text { border-radius: 4px; }