J'ai vu beaucoup de sites avec beaucoup de types de textbox en forme (par exemple, quelqu'un l'a dessiné dans la peinture et en a fait une zone de texte HTML). Comment sont faites ces boîtes de texte? Je me suis dit que une sorte de css est utilisé, mais comment obtenir que ..Comment créer une zone de texte personnalisée?
Une façon est de tirer profit de CSS3 comme ci-dessous:
<html>
<head>
<style type="text/css">
.round{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
padding:10px;
}
</style>
</head>
<body>
<textarea rows="1" cols="10" class="round">Blah blab </textarea>
</body>
</html>
De la même façon, vous pouvez ensuite ajouter des images d'arrière-plan , plus de style etc. comme ci-dessous. J'espère que cela répond à votre question!
<html>
<head>
<style type="text/css">
.round{
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
padding:10px;
background:yellow;
border: 2px dotted red;
}
</style>
</head>
<body>
<textarea rows="1" cols="10" class="round">Blah blab </textarea>
</body>
</html>
Alternativement, vous pouvez utiliser une image comme arrière-plan de zone de texte, ce qui peut vraiment rendre les choses impressionnant:
<style type="text/css">
input{
width:220px;
height:50px;
display:block;
background:url(images/input.png);
border: none;
}
</style>