Стилизиране на форми

[ventsi34]

Здравейте, правя един нов проект в който имам търсачка правя си аз форма с едно поле и бутон за submit-ване но под ИЕ-тата когато кликна на самата формичка за да пиша нещо се получава една тъмносиня рамка около бутона за submit-ване, как мога да премахна това, а също и има едни много неприятни оранжеви рамки в Chrome когато си кликнал на някое поле как мога да премахна всички тези бордъри?

 

[ventsi34]

Проблема с chrome го реших с

[css]
#id{
outline: none;
}
[/css]

но бордъра на IE си остава забелязвам че се получава когато е активна самата форма ако е кликнато другаде под ИЕ7 не се получава но когато кликна на да пиша и се появява...

 

[inferno16]

Какво играе ролята на бутон изображение или си е обикновен <input type="submit" />. Ако е възможно дай html и css.

 

[dakata__92]

[css]
#id{border: none;}
or
#id{border:0}
[/css]

 

[ventsi34]

<div id="search" class="clear">
<form action="#" method="POST">
	<div id="searchBox"><input type="text" name="search"/></div>
	<input type="submit" value="search" id="btnSubmit"/>
</form>
</div>

[css]#search{
float: right;
margin-right: 37px;
margin-top: 35px;
}
/*
begin search form styles
*/
#searchBox{
float: left;
margin: 0;
padding: 0 5px;
background: url(../img/searchBoxBackground.png) no-repeat;
width: 213px;
height: 35px;
}
#searchBox input{
outline: none;
border: none;
background: none;
width: 203px;
margin-top: 9px;
}
#btnSubmit{
float: left;
margin: 0;
padding: 0 10px;
background: url(../img/btnSearch.gif) repeat-x;
height: 33px;
border: 1px solid #e0ab46;
border-radius: 5px;
color: #fff;
font-size: 1.3em;
font-weight: bold;
word-wrap: break-word;
}[/css]

 

[Vladkata]

Можеш да ползваш CSS фреймуърк, който ти променя всички такива стилове: formee. Аз съм го пробвал и е много добър!

 

[somebody]

Под Хром и Сафари, тоест webkit базираните браузъри решението за премахване на нежеланото в някои случаи сияние е с outline:none; Колкото до това с добавянето на нежелан бордер под IE темата е доста популярна и ако беше питал чичо гугъл щеше да намериш всевъзможни решения.Като най-подходящ за мен си остава вмъкването на събмит бутона в друг елемент (в случая span).Премахваш всякакви бордери на събмит бутона с border:none; и вместо на него го задаваш на спанчето в което в вмъкнато, така няма да имаш проблеми с различните браузъри защото третират спан-а по един и същ начин за разлика от по-специфичните като събмит бутона.

[css]#btnSubmit{
margin: 0;
padding: 0 10px;
background: url(../img/btnSearch.gif) repeat-x;
height: 33px;
border:none;
color: #fff;
font-size: 1.3em;
font-weight: bold;
word-wrap: break-word;
overflow:visible;
}
form span { float: left; border: 1px solid #e0ab46; border-radius:5px; }[/css]

<form action="#" method="POST">
	<div id="searchBox"><input type="text" name="search"/></div>
	<span><input type="submit" value="search" id="btnSubmit"/></span>
</form>