Could you please provide proper styling for checkboxes and radio buttons, so that their styling is visually compliant with the rest of the template? I'm particularly interested in styles for the theme "01_mazel_multiprapose".
While this makes the checkboxes work again, it doesn't style them in any way that makes them look like the other input elements. For example, they should ideally have the same visual style and color as for example buttons.
Thank you for your answer. However, that is just copy-paste from what is already applied to the checkboxes by the css files in the theme. Even with it, the resulting checkboxes look out of place in the context of the other elements of the theme.
This is how they are being displayed (it is not even consistent between browsers): https://imgur.com/a/mTx09iB
First of all: Great theme! Thank you! […]
First of all: Great theme! Thank you!
Checkboxes and radio buttons, however, seem to be broken on Chrome 65.0.3325.181 throughout all of the three templates.
What triggers this are the following styles:
input[type="radio"], input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
}
Could you please provide proper styling for checkboxes and radio buttons, so that their styling is visually compliant with the rest of the template? I'm particularly interested in styles for the theme "01_mazel_multiprapose".
Thanks a lot in avance!
Try the following CSS
-----------------------------------------------------------
input[type='checkbox'] {
appearance: checkbox;
-webkit-appearance: checkbox;
}
input[type='radio'] {
appearance: radio;
-webkit-appearance: radio;
}
Live Example
-------------------------------------------
http://jsfiddle.net/VWC76/578/
-----
Thanks for the choosing Mazel Template!
While this makes the checkboxes work again, it doesn't style them in any way that makes them look like the other input elements. For example, they should ideally have the same visual style and color as for example buttons.
Can you add something like this, please?
border: 1px solid #ddd;
-webkit-border-radius: 0px;
border-radius: 0px;
color: #888;
outline: none;
font-weight: 400;
letter-spacing: 1px;
font-size: 13px;
padding: 10px 15px;
transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
display: inline-block;
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
border-color: #e6ae49;
color: #323232;
}
This is how they are being displayed (it is not even consistent between browsers): https://imgur.com/a/mTx09iB