EasyUI Forum
March 29, 2024, 02:30:13 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: styling a datagrid's checkboxes  (Read 5685 times)
sectioni
Jr. Member
**
Posts: 67


View Profile
« 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)
« Last Edit: September 19, 2018, 10:05:18 AM by sectioni » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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>
Logged
sectioni
Jr. Member
**
Posts: 67


View Profile
« Reply #2 on: September 20, 2018, 07:20:38 AM »

Nice idea using before and after.
I'll check it out
Logged
sectioni
Jr. Member
**
Posts: 67


View Profile
« Reply #3 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  Undecided
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!