Checkbox formatting not able to display like other columns' checkboxes
Application Type
Traditional Web
Service Studio Version
11.12.5 (Build 51077)

HI All,

I am having a table with two columns using checkbox, but the first column checkbox need to be used for advanced bulk select widget. I couldn't achieve the same checkbox display as the other column. I have copied like all the related css and applied to the first checkbox's css class like below, but still having a very edgy corners inside the checkbox. Can anyone help?

.checkbox1 {
    -webkit-appearance: none;
    cursor: pointer;
    height: 24px;
    position: relative;
    transition-duration: 180ms;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: all;
    width: 24px;
    border: 0;
    padding:0;
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    border-radius: var(--border-radius-soft);
}

.checkbox1:before{
background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    content: '';
    display: block;
    height: 22px;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 22px;
    border-radius: var(--border-radius-soft);
}

.checkbox1:before,
.TableRecords .TableRecords_Header [type="checkbox"]:before { 
    border-radius: var(--border-radius-soft); 
}

.checkbox1:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:hover:before {
    border: var(--border-size-s) solid var(--color-neutral-6);
    border-radius: var(--border-radius-soft);
}

.checkbox1:focus:before,
.radio-button:focus:before,
.TableRecords .TableRecords_Header [type="checkbox"]:focus:before {
    box-shadow: 0 0 0 2px #a3daff;
    border-radius: var(--border-radius-soft);
}

.checkbox1:checked:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
    border-radius: var(--border-radius-soft);
}

.checkbox1:checked:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:hover:before {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
            border-radius: var(--border-radius-soft);
}

.checkbox1[disabled="disabled"],
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"] {
    background-color: transparent;
    border: none;
    pointer-events: none;
}

.checkbox1[disabled="disabled"]:before,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.checkbox1:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after {
    border: var(--border-size-l) solid var(--color-neutral-0);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
    content: '';
    display: block;
    height: 4px;
    left: 5px;
    opacity: 0;
    position: absolute;
    top: 7px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 12px;
}

.checkbox1:checked:after,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:after {
    opacity: 1;
}

.checkbox1[disabled="disabled"]:after,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:after {
    border: var(--border-size-m) solid var(--color-neutral-4);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
}

.checkbox1.Not_Valid:before,
.TableRecords .TableRecords_Header [type="checkbox"].Not_Valid:before {
    border: var(--border-size-m) solid var(--color-error);
    height: 20px;
    width: 20px;
}

What I found is that, both original checkbox css and checkbox1 css have the same border-radius setting but not sure why cant make it same.

Hi @J u n i o r

not sure what you are trying to achieve but as far as I can understand you want to use checkboxes in both columns to be the same value when bulk select is triggered. Is that correct ?

best regards,

Marco

mvp_badge
MVP

Hi @J u n i o r ,

Please find the attached oml for sample.

I have added bulk select and check boxes in the table widget, without applying any css.

Hope this helps.

Regards,

Manish Jawla

CheckBoxBulk.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.