Champ de formulaire avec bouton intégré

by oilvier

HTML

<p>
	<label for="coupon">Coupon</label>
	<span class="form-compact">
		<input type="text" name="coupon" id="coupon" value="" class="form-compact__field" />
		<button class="btn form-compact__button" type="submit">
			<span>Ajouter</span>
		</button>
		<i class="form-compact__focusable"></i>
	</span>
</p>

SCSS

*, 
*:before, 
*:after {box-sizing: border-box;}

input {padding:0 16px; height:30px;}
.btn {border:0; background-color:gray; color:black;}

.form-compact {position:relative; display:flex; flex-wrap:wrap; margin:0; border:1px solid gray; padding:2px; background-color:white; z-index:1;}

	/* On ajoute cet élément supplémentaire pour créer un effet visuel indiquant le focus (1.) */
	.form-compact__focusable {position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; transition:border 0.2s ease-in, box-shadow 0.2s ease-in;}

	input.form-compact__field {flex:1 1 0%; border:0; min-width:0; width:100%; background:none;
		&::-webkit-input-placeholder {color:lightgray; opacity:1;}
		&::-moz-placeholder {color:lightgray; opacity:1;}
		&:-ms-input-placeholder {color:lightgray; opacity:1;}

		&:focus {box-shadow:none;
			& ~ .form-compact__focusable {border-color:rgba(firebrick,.32); box-shadow:0 0 4px 1px rgba(firebrick, 0.32); transition-timing-function:ease-out, ease-out;} /* [1] */
		}
	}
	
	.form-compact__button {padding:0 16px; background-color:lightgray;
		&:focus {background-color:firebrick; color:white;}
	}