feat: support textarea et select

This commit is contained in:
Kazhnuz 2024-10-05 17:13:50 +02:00
parent 950c395a19
commit dd6b841440
2 changed files with 23 additions and 5 deletions

View file

@ -52,7 +52,7 @@ Les différents types d'input ont des styles
<form> <form>
<label for="text">Champ de texte :</label> <label for="text">Champ de texte :</label>
<input type="text" id="text" name="text" /> <input type="text" id="text" name="text" />
<div><label for="checkbox">Champ de checkbox :</label> <div class="p"><label for="checkbox">Champ de checkbox :</label>
<input type="checkbox" id="checkbox" name="checkbox" /></div> <input type="checkbox" id="checkbox" name="checkbox" /></div>
<label for="color">Champ de couleur :</label> <label for="color">Champ de couleur :</label>
<input type="color" id="color" name="color" /> <input type="color" id="color" name="color" />
@ -70,10 +70,21 @@ Les différents types d'input ont des styles
<input type="file" id="file" name="file" /> <input type="file" id="file" name="file" />
<label for="number">Champ de nombre :</label> <label for="number">Champ de nombre :</label>
<input type="number" id="number" name="number" /> <input type="number" id="number" name="number" />
<label for="radio">Champ radio :</label> <div class="p"><label for="radio">Champ radio :</label>
<input type="radio" id="radio" name="radio" /> <input type="radio" id="radio" name="radio" /></div>
<label for="select">Champ select:</label>
<select name="select" id="select">
<option value="">--Choix d'option--</option>
<option value="canard">Canard</option>
<option value="oie">Oie</option>
<option value="poule">Poule</option>
<option value="faisan">Faisant</option>
<option value="dindon">Dindon</option>
</select>
<div> <div>
<input type="submit" id="submit" name="submit" /> <input type="submit" id="submit" name="submit" />
<input type="reset" id="reset" name="reset" /> <input type="reset" id="reset" name="reset" />
</div> </div>
</form> </form>
<div><textarea>uwu</textarea></div>

View file

@ -80,6 +80,8 @@ details
main, main,
.p, .p,
input, input,
textarea,
select,
article { article {
padding: 0; padding: 0;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
@ -214,7 +216,7 @@ a, button, input {
} }
} }
input { input, textarea, select {
display:block; display:block;
background-color: var(--background-color); background-color: var(--background-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -232,6 +234,11 @@ label {
font-weight: bolder; font-weight: bolder;
} }
textarea {
width: 100%;
margin-bottom: 1rem;
}
input[type=checkbox], input[type=radio] { input[type=checkbox], input[type=radio] {
display: inline-block; display: inline-block;
appearance: none; appearance: none;