<input type="text" class="my-input" />
body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.my-input {
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #ccc;
	outline-offset: 4px;
	&:focus {
		outline: 2px solid green;
		opacity: 0.3;
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.