This is more a suggestion than an issue.
For years we've had two no / yes radio buttons in the preferences panels. It works fine, we know it well so there's no need to change it. All the same, it's fairly basic. I had a go at a simple CSS-only approach to styling them as a yes/no widget that looks like this:
Is that maybe of interest? It's very simple. No sliding animation or fancy but unclear buttons. It works with the existing markup and yesnoradio function so nothing else other than css needs changing.
This is the CSS. It looks like a lot, but it could be much simplified by:
- Adding a
yesnoradio class to the containing .txp-form-field wrapper so that it can be targeted more specifically and the input type can be assumed as being a pair of radio buttons with labels.
- Removing empty spaces between the inputs and labels. That avoids the need for the
font-size: 0; and font-size: 13px; trick.
.txp-tabs-vertical-group .txp-form-field-value {
font-size: 0;
}
.txp-tabs-vertical-group .txp-form-field-value * {
font-size: 13px;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio] {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio] + label {
display: inline-block;
width: 3em;
background-color: none;
color: rgba(0, 0, 0, 0.3);
font-size: 13px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 2px 2px;
border: 1px solid #ccc;
transition: all 0.1s ease-in-out;
margin-right: 0;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio] + label:hover {
cursor: pointer;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio]:checked + label {
background-color: #F4F4F4;
box-shadow: none;
color: #000;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio] + label:first-of-type {
border-radius: 3px 0 0 3px;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio] + label:last-of-type {
border-radius: 0 3px 3px 0;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio]:not([checked]) + label:first-of-type {
border-right: 0;
}
.txp-tabs-vertical-group .txp-form-field-value input[type=radio]:not([checked]) + label:last-of-type {
border-left: 0;
}
.txp-tabs-vertical-group .txp-form-field-value:hover input[type="radio"] + label {
border-color: #ababab;
}
.txp-tabs-vertical-group .txp-form-field-value:hover input[type=radio]:checked + label:last-of-type {
border-left-color: #ccc;
}
.txp-tabs-vertical-group .txp-form-field-value:hover input[type=radio]:checked + label:first-of-type {
border-right-color: #ccc;
}
If you want to try it out, stick it into a file called custom.css in your admin_themes/hive/assets/css folder. No changes are needed to the yesnoradio function.
I've tried it on current firefox, chrome and safari but not IE / Edge or older versions. With German it also worked fine.
This is more a suggestion than an issue.
For years we've had two no / yes radio buttons in the preferences panels. It works fine, we know it well so there's no need to change it. All the same, it's fairly basic. I had a go at a simple CSS-only approach to styling them as a yes/no widget that looks like this:
Is that maybe of interest? It's very simple. No sliding animation or fancy but unclear buttons. It works with the existing markup and yesnoradio function so nothing else other than css needs changing.
This is the CSS. It looks like a lot, but it could be much simplified by:
yesnoradioclass to the containing.txp-form-fieldwrapper so that it can be targeted more specifically and the input type can be assumed as being a pair of radio buttons with labels.font-size: 0;andfont-size: 13px;trick.If you want to try it out, stick it into a file called
custom.cssin youradmin_themes/hive/assets/cssfolder. No changes are needed to the yesnoradio function.I've tried it on current firefox, chrome and safari but not IE / Edge or older versions. With German it also worked fine.