glm94/html-testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned up the main page to show the various controls and their states. Refactored the CSS a bit.

Browse Source
This commit is contained in:
glm94
2025-01-24 20:21:05 -06:00
parent 211388643b
commit d9d193c06e
3 changed files with 89 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
base.css
+13 -5
View File
@@ -29,6 +29,7 @@ textarea, input {
font-size: var(--default-font-size);
font: inherit;
color: currentColor;
border-radius: 0.20em; /* Slightly round the edges */
}
.flex {
@@ -63,6 +64,17 @@ footer {
border: var(--default-border-style);
}
*:disabled, input:disabled {
/*
Note: The pointerenter and pointerleave events are fired when a pointing device is moved into an element or
one of its descendants. So, even if pointer-events: none is set on the parent and not set on children,
the events are triggered on the parent after the pointer is moved in or out of a descendant.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
*/
pointer-events: none;
}
/* Override default OS provided checkboxes and radio buttons */
/* === CHECKBOX === */
@@ -74,9 +86,6 @@ input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
transform: scale(1);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
cursor: not-allowed;
}
/* TODO: These controls should probably have their sizes relative to their parent, so "em" instead of "rem" */
/* Set the size and properties of the box that represents the checkbox */
input[type=checkbox] {
@@ -85,7 +94,6 @@ input[type=checkbox] {
width: 1.15rem;
height: 1.15rem;
border: var(--default-border-style);
border-radius: 0.15em; /* Slightly round the edges */
/* Set the control to grid so the :before element is centered in the box, assuming the button is checked */
display: grid;
place-content: center;
@@ -116,7 +124,7 @@ input[type=checkbox]::before {
/* === BEGIN RADIO BUTTON === */
/* Set the size and properties of the circle that represents the radio button */
input[type=radio] {
appearance: none; /* Hide the defualt OS provided control */
appearance: none; /* Hide the default OS provided control */
margin: 0; /* Not removed by appearance */
width: 1.65rem;
height: 1.65rem;
low-contrast.css
+18 -4
View File
@@ -18,19 +18,31 @@ body {
color: var(--main-font-color);
}
h1, h2, h3, h4, h5, h6 {
color:maroon;
}
fieldset > legend {
color: darkblue;
}
textarea, input {
background-color: #a6a6a6;
background-color: var(--main-bg-color);
color: var(--main-font-color);
}
input[type="radio"], input[type="checkbox"] {
input[type="radio"], input[type="checkbox"], input, textarea {
border: var(--border-style);
}
input[type="radio"]:focus, input[type="checkbox"]:focus {
input[type="radio"]:focus, input[type="checkbox"]:focus, input:focus, textarea:focus {
border: var(--border-focus-style);
}
input[type="button"]:focus {
border: var(--border-style);
}
/* Color the check mark in the checkbox */
input[type=checkbox]::before {
/* Using shadow-box instead of background-color will enable the state of the radio button to be visible when printed. */
@@ -46,7 +58,9 @@ input[type="radio"]::before {
/* On button press / hold */
input[type="button"]:active {
border: 3px solid var(--alt-bg-color);
border: var(--border-style);
color: var(--main-bg-color);
background-color: var(--main-font-color);
}
::placeholder {
test.html
+55 -46
View File
@@ -49,57 +49,66 @@
Elementum sagittis vitae et leo duis ut diam quam nulla. Pharetra sit amet aliquam id diam maecenas ultricies mi. Donec et odio pellentesque diam volutpat commodo. Interdum consectetur libero id faucibus nisl tincidunt eget. Non nisi est sit amet. Tortor vitae purus faucibus ornare suspendisse sed. Varius morbi enim nunc faucibus a pellentesque sit. Donec massa sapien faucibus et molestie ac feugiat. Varius vel pharetra vel turpis nunc eget lorem. Pellentesque nec nam aliquam sem. Pulvinar mattis nunc sed blandit libero. At auctor urna nunc id cursus metus aliquam eleifend mi. Quam nulla porttitor massa id neque aliquam. Eget duis at tellus at urna condimentum mattis pellentesque id. Pharetra diam sit amet nisl suscipit adipiscing bibendum est.</p>
</article>
<div class="details">
<h1>Text Input Controls</h1>
<fieldset>
<legend>Textboxes</legend>
<div class="flex">
<input type="text" />
<p>DETAILS: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim lobortis scelerisque fermentum dui faucibus in. Sed id semper risus in hendrerit gravida. Ac auctor augue mauris augue neque gravida in.</p>
<textarea placeholder="Placeholder text here...."></textarea>
<textarea disabled="true" placeholder="Disabled Placeholder text here...."></textarea>
<input type="button" value="My button"/>
<input type="text" placeholder="Username..." />
<input type="text" placeholder="Disabled textbox..." disabled />
</div>
</fieldset>
<fieldset>
<legend>Textarea</legend>
<div class="flex">
<textarea placeholder="Enter memo..." rows="4"></textarea>
<textarea placeholder="A disabled textarea..." rows="4" disabled></textarea>
</div>
</fieldset>
</div>
<aside>
<h1>An asid here</h1>
<h1>Demo Controls</h1>
<fieldset>
<legend>Radio Buttons</legend>
<div class="flex">
<input type="radio" id="demoradio1" name="demo" />
<label for="demoradio1">Open</label>
<input type="radio" id="demoradio2" name="demo" checked />
<label for="demoradio2">Close</label>
<input type="radio" id="demoradio3" disabled />
<label for="demoradio3">Disabled</label>
<input type="radio" id="demoradio4" disabled checked />
<label for="demoradio4">Checked</label>
</div>
</fieldset>
<fieldset>
<legend>Checkboxes</legend>
<div class="flex">
<input type="checkbox" id="democheckbox1" />
<label for="democheckbox1">One</label>
<input type="checkbox" id="democheckbox2" />
<label for="democheckbox2">Two</label>
<input type="checkbox" id="democheckbox3" disabled />
<label for="democheckbox3">Disabled</label>
<input type="checkbox" id="democheckbox4" disabled checked />
<label for="democheckbox4">Checked</label>
</div>
</fieldset>
<fieldset>
<legend>Buttons</legend>
<div class="flex">
<input type="button" value="Press Me" />
<input type="button" value="Disabled Button" disabled />
</div>
</fieldset>
<fieldset>
<legend>Various Inputs</legend>
<div class="flex">
<input type="number" />
<input type="datetime" />
<input type="file" accept="image/*,.pdf" />
</div>
</fieldset>
</aside>
<footer>
<h2>Copyrights crusading like a mad man for that shit</h2>
<fieldset>
<legend>A collection of checkboxes.</legend>
<div class="flex">
<input type="checkbox" id="checkbox1" />
<label class="checkmark" for="checkbox1">One</label>
<input type="checkbox" id="checkbox2" />
<label class="checkmark" for="checkbox2">Two II</label>
<input type="checkbox" id="checkbox3" checked />
<label class="checkmark" for="checkbox3">Three 三</label>
<input type="checkbox" id="checkbox4" disabled checked/>
<label class="checkmark" for="checkbox4" class="form-control--disabled">Four GTA IV</label>
</div>
</fieldset>
<fieldset>
<legend>A radio button group, with a "name" property set</legend>
<div class="flex">
<input type="radio" id="radio1" name="radio" Checked />
<label for="radio1">No relations</label>
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Uncle Ruckus</label>
<input type="radio" id="radio3" name="radio" />
<label for="radio3">Reverend Father</label>
</div>
</fieldset>
<fieldset>
<legend>Radio Button States</legend>
<div class="flex">
<input type="radio" id="radio99" disabled checked name="Readonly" />
<label for="radio99">Readonly One</label>
<input type="radio" id="radio98" disabled name="Readonly" />
<label for="radio98">Readonly Two</label>
<input type="radio" id="radio97" checked name="toggle" />
<label for="radio97">Yes</label>
<input type="radio" id="radio96" checked name="toggle" />
<label for="radio96">No</label>
</div>
</fieldset>
</footer>
</div>
</body>
</html>