Custom checkbox and radios ?

Flow
1

Hi all, has someone created his own checkbox with custom colors ? (something like that

Customized Checkboxes

)

If yes, how to proceed ?

Thank You

2

Well didn’t do myself, but looks easily achievable. Just enhance your theme with the necessary styles and images and convert the Javascript-code into a ValueChangeListener that adds / removes the styles uising addStyleName() and removeStyleName().

3

Ty Tobias.
I figured out how to do everithing in css; here’s the css code if som1 will have my same need:


/* hide the checkboxes and radios */
.mycheckbox input[type="checkbox"]
,.myradio input[type="radio"]
 
{
	position: absolute;
	opacity: 0;
}

.mycheckbox input[type="checkbox"]
+label::before,.myradio input[type="radio"]
+label::before
{
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	line-height: 13px;
	margin: 0 8px 0 0;
/* be careful at how the images of the radios and checks are placed (need tuning on subsequents background-position: N px M px etcetc */
	background: url("File_with_radios_and_checks.png") no-repeat 0 0;
	vertical-align: middle;
}

/* disabled checkbox or radio */
.my-form input[type="checkbox"]
:disabled+label,.my-form input[type="radio"]
:disabled+label
{
	opacity: .5;
	cursor: default; /* or cursor: no-drop */
}

/* hover checkbox (unselected state only) */
.mycheckbox input[type="checkbox"]
:not(:checked):hover+label::before
	{
	background-position: 0 -13px;
}

/* selected checkbox */
.mycheckbox input[type="checkbox"]
:checked+label::before {
	background-position: 0 -26px;
}

/* normal state radio */
.myradio input[type="radio"]
+label::before {
	background-position: -13px 0;
}

/* radio hover (unselected state only) */
.myradio input[type="radio"]
:hover+label::before {
	background-position: -13px -13px;
}

/* selected radio */
.myradio input[type="radio"]
:checked+label::before {
	background-position: -13px -26px;
}
4

Thanks Valerio,

Your CSS helped me a lot. Our designers had required me to use jQuery plugin icheck but this didn’t work with Vaadin at all. I was able to combine your CSS above and the icheck CSS file to get exactly what the designers wanted without the need for jQuery.

Many Thanks

Chris