Four-region selection box

Question

Four-region selection box

Is there a way to create a quad state checkbox without using a set of images for various icons? I know how to have a tri-state checkbox with indeterminate, but I need to rotate through 4 states. Are there any more elegant solutions available?

html css

Answer 1

Answer №1

By using radio buttons and some CSS (CSS3), you can create a similar effect of cycling through states without the need for JavaScript:

.cyclestate {
 display: inline-grid;
}
.cyclestate label {
 grid-area: 1 / 1;
 background-color: white; 
 color: black;
 z-index: 0;
 opacity: 0;
}
.cyclestate input {
 position: absolute;
 z-index: -1;
}
.cyclestate input:checked + label {
 opacity: 1;
}
.cyclestate input:first-of-type + label {
 z-index: 2;
}
.cyclestate input:checked + label + input + label {
 opacity: 0;
 z-index: 2;
}
/* -- Unrelated and accessibility -- */
.cyclestate { border: none; padding: 0; }
.cyclestate legend { position: absolute; }
.cyclestate label { padding: 1em; text-align: center; display: inline-block; cursor: pointer; user-select: none;
}
.cyclestate label::before { content: '← '; }
.cyclestate label::after { content: ' →'; }
.cyclestate label::before, label::after { color: transparent; }
.cyclestate input:focus-visible + label { outline: solid; }
.cyclestate input:focus-visible + label::before,
.cyclestate input:focus-visible + label::after { color: currentcolor; }
:root { background: dimgray; color: snow; }
:link { color: aqua; } :visited { color: lime; }

<fieldset class="cyclestate">
  <legend>Pick a number</legend>
  <input id="one" type="radio" name="r" checked>
  <label for="one">One</label>
  <input id="two" type="radio" name="r">
  <label for="two">Two</label>
  <input id="three" type="radio" name="r">
  <label for="three">Two Plus One</label>
  <input id="four" type="radio" name="r">
  <label for="four">Four</label>
</fieldset>

<p><button onclick="x.classList.toggle('cyclestate')">Toggle condenseness ↑</button>

This method involves layering labels on top of each other using modern CSS techniques like grid, ensuring that only the checked input's label is visible while maintaining accessibility.

(Note: Testing with screen readers and older browsers is recommended.)

The original 2015 snippet provided has questionable accessibility practice, it is advised to avoid using it altogether:

.cyclestate input:not(b),
.cyclestate input:not(b) + label {
  display: none;
}
.cyclestate input:checked + label {
  display: inline-block;
  width: 4em;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-appearance: button;
  -moz-appearance: button;
}

<span class="cyclestate">
  <input type="radio" name="foo" value="one" id="one" checked>
  <label for="two">one</label>
  <input type="radio" name="foo" value="two" id="two">
  <label for="three">two</label>
  <input type="radio" name="foo" value="three" id="three">
  <label for="four">three</label>
  <input type="radio" name="foo" value="four" id="four">
  <label for="one">four</label>
</span>

Using this method allows for a compact visual representation of multiple states in one place, with clear values on the server side.

However, it should be noted that this usage of labels may exploit the feature of label targeting different input than described.

Answer 2

By using radio buttons and some CSS (CSS3), you can create a similar effect of cycling through states without the need for JavaScript:

.cyclestate {
 display: inline-grid;
}
.cyclestate label {
 grid-area: 1 / 1;
 background-color: white; 
 color: black;
 z-index: 0;
 opacity: 0;
}
.cyclestate input {
 position: absolute;
 z-index: -1;
}
.cyclestate input:checked + label {
 opacity: 1;
}
.cyclestate input:first-of-type + label {
 z-index: 2;
}
.cyclestate input:checked + label + input + label {
 opacity: 0;
 z-index: 2;
}
/* -- Unrelated and accessibility -- */
.cyclestate { border: none; padding: 0; }
.cyclestate legend { position: absolute; }
.cyclestate label { padding: 1em; text-align: center; display: inline-block; cursor: pointer; user-select: none;
}
.cyclestate label::before { content: '← '; }
.cyclestate label::after { content: ' →'; }
.cyclestate label::before, label::after { color: transparent; }
.cyclestate input:focus-visible + label { outline: solid; }
.cyclestate input:focus-visible + label::before,
.cyclestate input:focus-visible + label::after { color: currentcolor; }
:root { background: dimgray; color: snow; }
:link { color: aqua; } :visited { color: lime; }

<fieldset class="cyclestate">
  <legend>Pick a number</legend>
  <input id="one" type="radio" name="r" checked>
  <label for="one">One</label>
  <input id="two" type="radio" name="r">
  <label for="two">Two</label>
  <input id="three" type="radio" name="r">
  <label for="three">Two Plus One</label>
  <input id="four" type="radio" name="r">
  <label for="four">Four</label>
</fieldset>

<p><button onclick="x.classList.toggle('cyclestate')">Toggle condenseness ↑</button>

This method involves layering labels on top of each other using modern CSS techniques like grid, ensuring that only the checked input's label is visible while maintaining accessibility.

(Note: Testing with screen readers and older browsers is recommended.)

The original 2015 snippet provided has questionable accessibility practice, it is advised to avoid using it altogether:

.cyclestate input:not(b),
.cyclestate input:not(b) + label {
  display: none;
}
.cyclestate input:checked + label {
  display: inline-block;
  width: 4em;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-appearance: button;
  -moz-appearance: button;
}

<span class="cyclestate">
  <input type="radio" name="foo" value="one" id="one" checked>
  <label for="two">one</label>
  <input type="radio" name="foo" value="two" id="two">
  <label for="three">two</label>
  <input type="radio" name="foo" value="three" id="three">
  <label for="four">three</label>
  <input type="radio" name="foo" value="four" id="four">
  <label for="one">four</label>
</span>

Using this method allows for a compact visual representation of multiple states in one place, with clear values on the server side.

However, it should be noted that this usage of labels may exploit the feature of label targeting different input than described.

Answer 3

Answer №2

It is possible to give the appearance that a checkbox has three states, but in reality, it will always have only two options available.
Furthermore, achieving the "indeterminate" visual state is not inherent to the default user interface and requires programmatic activation:

var box = document.getElementById('box'),
    checked = document.getElementById('checked'),
    indet = document.getElementById('indet');
var update = function()
{
    checked.textContent = box.checked;
    indet.textContent = box.indeterminate;
};
box.addEventListener('click', update);
document.getElementById('a').addEventListener('click', function()
{
    box.checked = true;
    update();
});
document.getElementById('b').addEventListener('click', function()
{
    box.checked = false;
    update();
});
document.getElementById('c').addEventListener('click', function()
{
    box.indeterminate = true;
    update();
});
document.getElementById('d').addEventListener('click', function()
{
    box.indeterminate = false;
    update();
});

<input type="checkbox" id="box"><br>
<button id="a">On</button> <button id="b">Off</button><br>
<button id="c">Indeterminate</button> <button id="d">Clear indeterminate</button>
<div>box.checked: <span id="checked"></span></div>
<div>box.indeterminate: <span id="indet"></span></div>

In response to your inquiry:

There currently isn't a built-in method to introduce a fourth visual (or actual) state to a checkbox, although this doesn't mean resorting to using images is necessary.
It's feasible to style an element resembling a checkbox and utilize JavaScript to simulate a rotation of states:

var state = 0;
var toggle = document.getElementById('toggle');
toggle.addEventListener('click', function()
{
    state = (state + 1) % 4;
    toggle.className = 'state' + state;
});

#toggle
{
    border: solid 1px #666;
    border-radius: 3px;
    width: 14px;
    height: 14px;
}
.state0
{
    background: linear-gradient(#DDD, #FFF);
}
.state1
{
    background: linear-gradient(#F00, #C00);
}
.state2
{
    background: linear-gradient(#FF0, #CC0);
}
.state3
{
    background: linear-gradient(#0F0, #0A0);
}

<div id="toggle" class="state0"></div>

Ultimately, alternatives beyond traditional checkboxes will be required.

Moreover, implementing a checkbox-like entity with more than two states can be confusing, so I encourage exploring options designed for multiple selections like radio buttons or dropdown lists.

Answer 4

It is possible to give the appearance that a checkbox has three states, but in reality, it will always have only two options available.
Furthermore, achieving the "indeterminate" visual state is not inherent to the default user interface and requires programmatic activation:

var box = document.getElementById('box'),
    checked = document.getElementById('checked'),
    indet = document.getElementById('indet');
var update = function()
{
    checked.textContent = box.checked;
    indet.textContent = box.indeterminate;
};
box.addEventListener('click', update);
document.getElementById('a').addEventListener('click', function()
{
    box.checked = true;
    update();
});
document.getElementById('b').addEventListener('click', function()
{
    box.checked = false;
    update();
});
document.getElementById('c').addEventListener('click', function()
{
    box.indeterminate = true;
    update();
});
document.getElementById('d').addEventListener('click', function()
{
    box.indeterminate = false;
    update();
});

<input type="checkbox" id="box"><br>
<button id="a">On</button> <button id="b">Off</button><br>
<button id="c">Indeterminate</button> <button id="d">Clear indeterminate</button>
<div>box.checked: <span id="checked"></span></div>
<div>box.indeterminate: <span id="indet"></span></div>

In response to your inquiry:

There currently isn't a built-in method to introduce a fourth visual (or actual) state to a checkbox, although this doesn't mean resorting to using images is necessary.
It's feasible to style an element resembling a checkbox and utilize JavaScript to simulate a rotation of states:

var state = 0;
var toggle = document.getElementById('toggle');
toggle.addEventListener('click', function()
{
    state = (state + 1) % 4;
    toggle.className = 'state' + state;
});

#toggle
{
    border: solid 1px #666;
    border-radius: 3px;
    width: 14px;
    height: 14px;
}
.state0
{
    background: linear-gradient(#DDD, #FFF);
}
.state1
{
    background: linear-gradient(#F00, #C00);
}
.state2
{
    background: linear-gradient(#FF0, #CC0);
}
.state3
{
    background: linear-gradient(#0F0, #0A0);
}

<div id="toggle" class="state0"></div>

Ultimately, alternatives beyond traditional checkboxes will be required.

Moreover, implementing a checkbox-like entity with more than two states can be confusing, so I encourage exploring options designed for multiple selections like radio buttons or dropdown lists.

Answer 5

Answer №3

Unfortunately, it is not currently feasible. However, for those interested, there is a helpful resource that explains how to utilize three states, including the indeterminate state: https://css-tricks.com/indeterminate-checkboxes/

You will need to devise an alternative solution by incorporating your own icons and essentially creating a customized form control. One potential design approach that addresses the requirement for multiple states involves:

Utilizing a series of icons, reminiscent of Gmail's star system. In Gmail, clicking on the star changes its color, and after a certain number of clicks (around 10), other icons like exclamation points and checkmarks appear.

Link your various state specifications with the icon currently in use (or the position within the icon list).

Answer 6

Unfortunately, it is not currently feasible. However, for those interested, there is a helpful resource that explains how to utilize three states, including the indeterminate state: https://css-tricks.com/indeterminate-checkboxes/

You will need to devise an alternative solution by incorporating your own icons and essentially creating a customized form control. One potential design approach that addresses the requirement for multiple states involves:

Utilizing a series of icons, reminiscent of Gmail's star system. In Gmail, clicking on the star changes its color, and after a certain number of clicks (around 10), other icons like exclamation points and checkmarks appear.

Link your various state specifications with the icon currently in use (or the position within the icon list).

Four-region selection box

Answer №1

Answer №2

Answer №3

Similar questions

NavigateToTop/BackToTheBeginning

Close button located in the upper-right corner is partially cut off

While continuing to input text, make sure to highlight a specific element from the search results list

CSS: Placing text within an icon - A simple guide

"Is there a way to align a span element on the same line as an h

Having trouble loading the linked CSS file in the Jade template

Problem with Bootstrap container-fluid overlapping with floated element

Adjusting HTML image sizes

Tips for creating a functional Submit button in HTML

Issue with Bootstrap alignment on the right side

unable to modify background color when mouse hovers in CSS

When attempting to transfer data from the parent component to child components, the data is appearing as undefined in the display

Delete any additional input forms

Unveil concealed information within a freshly enlarged container

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Troubleshoot: OffCanvas feature in Bootstrap 5 not functioning properly within navbar on small screens

analyzing information from a variety of HTML tables

CSS guidelines for handling single line breaks with the white-space property set to pre-wrap

Arranging divs using the float property

I need to extract information from the source code of a different website - how can I do this