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

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

DOM поиска яндекс

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

Дерево для одного поля поиска:

<div class="ya-site-form input-s ya-site-form_bg_transparent ya-site-form_inited_yes" id="ya-site-form0"><div class="ya-site-form__form"><table class="ya-site-form__wrap" cellspacing="0" cellpadding="0"><tbody><tr><td class="ya-site-form__search-wrap"><table class="ya-site-form__search" cellspacing="0" cellpadding="0"><tbody><tr><td class="ya-site-form__search-input"><table class="ya-site-form__search-input-layout"><tbody><tr><td class="ya-site-form__search-input-layout-l"><div class="ya-site-form__input"><input name="text" value="" class="ya-site-form__input-text" placeholder="Поиск ..." autocomplete="off" type="search"><div class="ya-site-suggest"><div class="ya-site-suggest-popup" style="display: none;"><i class="ya-site-suggest__opera-gap"></i><div class="ya-site-suggest-list"><iframe class="ya-site-suggest__iframe" src="javascript:'<body style=&quot;background:none;overflow:hidden&quot;>'" frameborder="0"></iframe><ul class="ya-site-suggest-items"></ul></div></div></div></div></td><td class="ya-site-form__search-input-layout-r"><input class="ya-site-form__submit" value="Найти" type="button"></td></tr></tbody></table></td></tr><tr><td class="ya-site-form__gap"><div class="ya-site-form__gap-i"></div></td></tr></tbody></table></td></tr></tbody></table></div></div>

Это еще не всё, ещё есть стили CSS для каждого класса в таблице.

#ya-site-form0,#ya-site-form0 .ya-site-form__form,#ya-site-form0 .ya-site-form__input,#ya-site-form0 .ya-site-form__input-text,#ya-site-form0 .ya-site-form__submit,#ya-site-form0 .ya-site-form__search-precise {
	font-size:12px!important;
	color:#000!important
}
#ya-site-form0 .ya-site-form__form-form {
	display:block
}
#ya-site-form0 .ya-site-form__form-form,#ya-site-form0 .ya-site-form__input,#ya-site-form0 .ya-site-form__search-precise,#ya-site-form0 .ya-site-form__search-precise__radio,#ya-site-form0 .ya-site-form__gap,#ya-site-form0 .ya-site-form__gap-i,#ya-site-form0 .ya-site-form__logo-img {
	margin:0;
	padding:0
}
#ya-site-form0 {
	margin:0!important;
	padding:0!important
}
#ya-site-form0 .ya-site-form__logo-wrap {
	width:65px;
	vertical-align:top;
	border-collapse:collapse
}
#ya-site-form0 .ya-site-form__logo {
	display:block;
	width:52px;
	margin:0;
	padding:0 6px 0 0;
	text-decoration:none
}
#ya-site-form0 .ya-site-form__logo-img {
	width:52px;
	height:21px;
	border:0!important
}
#ya-site-form0 .ya-site-form__search-wrap {
	border-collapse:collapse
}
#ya-site-form0 .ya-site-form__search {
	font-size:12px!important;
	width:100%
}
#ya-site-form0 .ya-site-form__search-input,#ya-site-form0 .ya-site-form__search-precise, {
	border:0
}
#ya-site-form0 .ya-site-form__search-input {
	padding:6px
}
#ya-site-form0 .ya-site-form__search-input-layout,#ya-site-form0 .ya-site-form__search-input-layout-l,#ya-site-form0 .ya-site-form__search-input-layout-r {
	font-size:12px!important;
	padding:0;
	vertical-align:middle;
	border:0;
	border-collapse:collapse
}
#ya-site-form0 .ya-site-form__search-input-layout,#ya-site-form0 .ya-site-form__search-input-layout-l {
	width:100%
}
#ya-site-form0 .ya-site-form__search-precise {
	padding:0 18px 5px 6px;
	text-align:left;
	vertical-align:top
}
#ya-site-form0 .ya-site-form__search-precise-i {
	white-space:nowrap
}
#ya-site-form0 .ya-site-form__search-precise__radio {
	width:auto;
	margin:0 .3em 0 0;
	vertical-align:middle;
	background:none
}
#ya-site-form0 .ya-site-form__search-precise__label {
	margin:0 .4em 0 0;
	padding:0;
	vertical-align:middle
}
#ya-site-form0 .ya-site-form__input-text {
	width:100%;
	margin:0!important;
	cursor:text;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-color:#fff;
	border:1px solid #7f9db9;
	outline-style:none;
	-webkit-appearance:textfield
}
#ya-site-form0 .ya-site-form__input-text_type_hint {
	background-repeat:no-repeat;
	background-position:.2em 50%
}
#ya-site-form0 .ya-site-form__submit {
	display:block;
	width:auto;
	margin:0 0 0 5px
}
#ya-site-form0 .ya-site-form__arrow-wrap {
	overflow:hidden;
	width:30px;
	padding:0;
	vertical-align:middle
}
#ya-site-form0 .ya-site-form__arrow {
	position:relative
}
#ya-site-form0 .ya-site-form__arrow-a {
	position:absolute;
	top:50%;
	right:0;
	width:0;
	height:0;
	margin-top:-59px;
	border:solid transparent;
	border-width:59px 0 59px 30px;
	-moz-border-end-style:dotted
}
#ya-site-form0 .ya-site-form__wrap {
	width:100%;
	table-layout:fixed;
	border-collapse:collapse
}
#ya-site-form0 .ya-site-form__gap {
	border:0
}
#ya-site-form0 .ya-site-form__gap-i {
	width:9em
}
#ya-site-form0.ya-site-form_arrow_yes .ya-site-form__search-input {
	padding-right:0
}
#ya-site-form0.ya-site-form_logo_left .ya-site-form__logo {
	margin-top:4px;
	margin-left:5px
}
#ya-site-form0.ya-site-form_logo_top .ya-site-form__logo {
	display:block;
	margin:6px 0 0 6px
}
#ya-site-form0 .ya-site-form__submit_type_image {
	width:19px;
	height:15px;
	outline:none;
	cursor:pointer;
	border:0
}
#ya-site-form0 .ya-site-form__submit_type_image {
	background: url(https://site.yandex.net/v2.0/i/search.png) no-repeat 
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text::-webkit-input-placeholder {
	color:#333333;
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text:-moz-placeholder {
	color:#333333;
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text::-moz-placeholder {
	color:#333333;
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text:-ms-input-placeholder {
	color:#333333;
}
#ya-site-form0 .ya-site-form__form * {
	font-size: 15px !important 
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text {
	font-style: normal!important 
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text {
	font-weight: normal!important 
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text {
	color: #333333!important 
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text {
	border-color: #eaeaea!important 
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text:focus {
	border-color: #eaeaea!important 
}
#ya-site-form0 .ya-site-form__form .ya-site-form__input-text {
	background-color: #f7f7f7!important 
}
#ya-site-form0 .ya-site-form__search, #ya-site-form0 .ya-site-form__search td, #ya-site-form0 .yaform__precise-i {
	background-color: transparent !important 
}
#ya-site-form0 .ya-site-form__search-precise__label {
	color:#000000 !important 
}
#ya-site-form0 .ya-site-form__arrow-a {
	border-left-color: transparent 
}

В этом нет смысла, поле для поиска уже оформлено на сайте. Основное время на подключение поиска Яндекса ушло на изменение добавленного стиля для поля поиска.

Вопрос:

Как отключить стили, указанные выше, и убрать таблицу HTML. Нужно оставить только форму c полем ввода текста для поиска?

2 комментария
Авторизуйтесь, чтобы оставить комментарий
Елена Першина
12 января 2017, 23:05
Добрый день! Простите, пожалуйста, за такую задержку с ответом. К сожалению, ваш вопрос затерялся. 
Вы можете добавлять стили как показано в вебинаре: https://events.yandex.ru/events/webinars/pds_2/
Но наши стили никуда не денутся, их можно просто переопределять и дополнять.
Ещё можно вставить нечто подобное (тогда не будет ни таблицы, ни наших стилей), но это будет нарушением нашей лицензии, кроме того, не будут работать наши подсказки:
<form action="https://yandex.ru/search/site/" method="get" accept-charset=" utf-8"><fieldset><legend>Поиск по сайту</legend><p><label>site-search<input type="hidden" name="searchid" value="{{SEARCH_ID}}"/><input type="hidden" name="l10n" value="ru"/><input type="hidden" name="reqenc" value=""/><input id="search" type="text" name="text" value=""/></label></p><input type="submit" value="Найти"/></fieldset></form>
{{SEARCH_ID}} - заменить на ваш searchID – он в URL настроек поиска.  

Виктор
17 января 2017, 16:49
Спасибо за ответ, но, уже стараюсь не связываться с Яндексом.