Print Page - styling a datagrid's checkboxes

Title: styling a datagrid's checkboxes
Post by: sectioni on September 19, 2018, 09:50:01 AM

Is there a way to do that? (other than modifying your code to add a <label> tag below and style that with css)

Title: Re: styling a datagrid's checkboxes
Post by: stworthy on September 20, 2018, 06:37:14 AM

The code below shows how to custom the checkbox styles.

Code:

<style type="text/css">
	.datagrid-cell-check input{
		width: 15px;
		height: 1px;
		position: relative;
	}
	.datagrid-cell-check input::before{
		content: '';
		position: absolute;
		width: 15px;
		height: 15px;
		left: 0;
		top: 0;
		background: #999;
	}
	.datagrid-cell-check input:checked::after{
		position: absolute;
		box-sizing: border-box;
		width: 15px;
		height: 15px;
		top: 0;
		padding-left: 4px;
		color: #fff;
		background: #555;
		content: 'x';
		font-size: 11px;
	}
</style>

Title: Re: styling a datagrid's checkboxes
Post by: sectioni on September 20, 2018, 07:20:38 AM

Nice idea using before and after.
I'll check it out

Title: Re: styling a datagrid's checkboxes
Post by: sectioni on October 15, 2018, 06:31:24 AM

Pseudo elements on inputs don't work in Firefox.
Looks like i'm gonna have to add those label tags to your core anyway :-\

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: sectioni on September 19, 2018, 09:50:01 AM