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

PHP dropdown menu is a dynamic feature that provides users

Generate visual representations of data sorted by category using AngularJS components

Remove all HTML tags except for those containing a specific class

Centralizing images in a Facebook gallery/lightbox during the loading process

Adjusting the text of a button when hovering over it will also trigger a resizing of the

Background and checked styles for radio buttons

Exploring Objects within an array using Angular loops

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

Conceal the PayPal Button

What is the method for assigning a class name to a child element within a parent element?

Distributing elements evenly across the parent width using Angular FlexLayout for a responsive design

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Immediate display of collapsed/toggle menu in a Bootstrap navbar

Identify a specific HTML template using jQuery

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

Populate JQuery fields dynamically based on changing name elements

What is preventing me from updating one dropdown list based on the selection made in another dropdown list?

An HTML document may display a segment of a URL

The v-select menu in Vuetify conceals the text-field input