Maison > Article > interface Web > Comment créer un champ de recherche arrondi en HTML
Comment créer un champ de recherche arrondi en HTML
- 藏色散人original
- 2021-02-24 11:54:309618parcourir
Comment implémenter le champ de recherche arrondi en HTML : créez d'abord un exemple de fichier HTML ; puis créez une balise de formulaire ; puis définissez la zone de saisie d'entrée et enfin implémentez-la via des attributs tels que "border-top-left" ; -radius" Un champ de recherche aux coins arrondis fera l'affaire.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Comment faire un champ de recherche avec des coins arrondis en HTML ?
est très simple, utilisant principalement l'attribut border en CSS. L'exemple de code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
input[type=text] {
color: #111;
background-color: #c7dec6;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:20px;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/baidu" target="_blank">
<input type="text" name="word" size="60"
style="height: 30px;width: 1100px;background-color: #9a9a9a26;">
<input type="submit" value="搜索"
style="border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:20px;
height: 60px;width: 80px;
margin-left: 30px;
background-color: #1591ea;
font-size: large;
color: antiquewhite;">
</form>
</body>
</html>L'effet d'exécution est le suivant :
tutoriel vidéo CSS]
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!