feat: support textarea et select
This commit is contained in:
parent
950c395a19
commit
dd6b841440
2 changed files with 23 additions and 5 deletions
|
@ -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>
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue