Неприятная рамка вокруг кнопки в Opera

в 4:56, , рубрики: button, css, html, opera, метки: ,

Доброго времени суток, дорогие Хабровчане!
Возникла довольно распространенная задача, а именно — убрать неприятную черную рамку вокруг кнопки, получившая фокус. Данная проблема существует в таких браузерах как 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


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js