Maison > Article > interface Web > Comment intégrer de manière transparente un bouton dans un champ de saisie à l'aide de CSS ?
Question :
Dans une interface utilisateur, comment Nous incorporons visuellement un bouton dans un champ de saisie, permettant aux utilisateurs d'interagir avec lui de manière transparente, de maintenir la clarté du texte malgré la longueur du champ, de garantir un bon fonctionnement de la mise au point et de maintenir l'accessibilité pour les lecteurs d'écran ?
Réponse :
Pour obtenir cet effet, nous pouvons utiliser une disposition flexbox et placer la bordure autour du formulaire contenant. En implémentant une disposition flexbox, l'entrée et le bouton peuvent être disposés côte à côte, l'entrée s'étirant pour occuper l'espace disponible. Par la suite, la bordure de l'entrée peut être supprimée pour la rendre invisible, créant l'illusion que la bordure entoure à la fois le bouton et l'entrée.
Mise en œuvre :
L'extrait suivant présente l'implémentation du code :
<code class="css">form { display: flex; flex-direction: row; border: 1px solid grey; padding: 1px; } input { flex-grow: 2; border: none; } input:focus { outline: none; } form:focus-within { outline: 1px solid blue; } button { border: 1px solid blue; background: blue; color: white; }</code>
<code class="html"><form> <input /> <button>Go</button> </form></code>
Avantages de cette approche :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!