Details
Updated on
Last site update: 8 May 2024
These are the details
This has some minimum styles added to it but are not necessary for the drop down bit.
This is worth doing though:
details>summary:hover {
cursor: pointer;
}Odio nesciunt nostrum numquam eum sapiente inventore rem magni nam exercitationem. Magni!
1<details>
2 <summary>These are the details</summary>
3 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione ducimus expedita quidem!</p>
4 <p>Odio nesciunt nostrum numquam eum sapiente inventore rem magni nam exercitationem. Magni!</p>
5</details>Content Editable
You can edit this paragraph by clicking on it. If it's set on a parent then the child element will inherit it.
1<p contenteditable="true">Lorem ipsum</p><mark> element.
datalist
Check the code for this:
1<form action="" method="GET">
2<label for="theropod">Choose your fave theropod or add you own. (Try starting with a 't' an 'x', a 'c' or a
3 'd'.)</label>
4<input list="theropod" name="theropods" id="theropods">
5<datalist id="theropod">
6 <option value="t-rex">
7 <option value="xixianykus">
8 <option value="deinonychus">
9 <option value="coelophysis">
10 <option value="ceratosaurus">
11</datalist>
12<input type="submit">
13</form>