Доброго времени суток, дорогие Хабровчане!
Возникла довольно распространенная задача, а именно — убрать неприятную черную рамку вокруг кнопки, получившая фокус. Данная проблема существует в таких браузерах как Opera и Internet Explorer.
Сначала я пытался что значит "замутить" со свойством outline, но все безуспешно.
outline: none !important;
Решил покопаться в ответах google на поставленный вопрос. На самом деле задача очень легко решается, просто необходимо воспользоваться, что называется wrapper'ом. То есть:
- Обернуть кнопку в тэг div;
- В стилях кнопки прописать нужные свойства, но с учетом, что border: none;
- А уже нужную рамку следует задать нашему wrapper'у.
Пробуем:
<html>
<head>
<title>Template</title>
<style>
.wrapBtn{
border: 1px solid #d3d3d3;
padding:0 !important;
width: 100px;
}
.btn{
background-color: #FFCC99;
border: none;
width: 100px;
margin: 0;
padding: 10px;
}
textarea{
margin-bottom: 5px;
}
</style>
</head>
<body>
<form>
Отзыв:
<textarea rows="7" cols="50"></textarea>
<div class="wrapBtn"><input class="btn" type="submit" value="Отправить"/></div>
</form>
</body>
</html>
Минусом данного решения является то, что приходится подгонять ширину div'а и ширину кнопки.
P.S.
Так как это решение является элементарным, я уверен, что есть и другой подход к решению этой проблемы. Поделитесь им! =)
Автор: tratotui
