I have an elementor form widget that I need to style in a custom way. I’ve used all the options that the elementor UI will offer for customization of the form, but now I will need to style an acceptance checkbox and an input file. At the moment I’m trying with this code to style the checkbox, but I’m having some problems. When the checkbox is hovered, it will change his height of 3/5 pixels and will not mantain the rounded form. This is the CSS I’ve applied to get the input to be rounded, how I fix this?
#form-field-field_7244425 {
width: 25px;
height: 25px;
border-radius: 50% !important;
appearance: none;
background-color: #fff;
vertical-align: middle;
outline: none;
cursor: pointer;
}
#form-field-field_7244425:checked {
background-color: black !important;
}
For the input field, I need to have a custom style for the file select input and button but I’m unable to target the button. Form the console I can see that the button have an ID input#file-upload-button
but if I try to use the selector and add some custom CSS it will be ignored. How I can style the file input of elementor to reflect what the design of the form need to be?
input#file-upload-button {
background-color: transparent !important;
border-radius: 50px!important;
}