Search results

How To

Customize CheckBox Appearance

You can customize the appearance of the CheckBox component using the CSS rules. Define own CSS rules according to your requirement and assign the class name to the cssClass property.

The background and border color of the CheckBox is customized through the custom classes to create primary, success, warning, and danger info type of checkbox.

razor
custom.cs
@section ControlsSection{
      @Html.EJS().CheckBox("primary").Label("Primary").Checked(true).CssClass('e-primary').Render()
      @Html.EJS().CheckBox("success").Label("Success").Checked(true).CssClass('e-success').Render()
      @Html.EJS().CheckBox("info").Label("Info").Checked(true).CssClass('e-info').Render()
      @Html.EJS().CheckBox("warning").Label("Warning").Checked(true).CssClass('e-warning').Render()
      @Html.EJS().CheckBox("danger").Label("Danger").Checked(true).CssClass('e-danger').Render()
}


<style>

.e-checkbox-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

.e-checkbox-wrapper.e-primary:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #e03872;
}

.e-checkbox-wrapper.e-success .e-frame.e-check,
.e-checkbox-wrapper.e-success .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #689f38;
}

.e-checkbox-wrapper.e-success:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #449d44;
}

.e-checkbox-wrapper.e-info .e-frame.e-check,
.e-checkbox-wrapper.e-info .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #2196f3;
}

.e-checkbox-wrapper.e-info:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #0b7dda;
}

.e-checkbox-wrapper.e-warning .e-frame.e-check,
.e-checkbox-wrapper.e-warning .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #ef6c00;
}

.e-checkbox-wrapper.e-warning:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #cc5c00;
}

.e-checkbox-wrapper.e-danger .e-frame.e-check,
.e-checkbox-wrapper.e-danger .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #d84315;
}

.e-checkbox-wrapper.e-danger:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
  background-color: #ba3912;
}

</style>
public ActionResult Custom()
{
    return View();
}

Customize width and height

The height and width of the CheckBox component can be customized by setting height and width property.

The following section explains about how to customize the height and width of the CheckBox component.

razor
customheight.cs
@section ControlsSection{
     @Html.EJS().CheckBox("customsize").Label("Default").CssClass('e-customsize').Render()
}


<style>

.e-checkbox-wrapper {
  margin-top: 30px;
}

.e-customsize.e-checkbox-wrapper .e-frame {
  height: 30px;
  width: 30px;
  padding: 8px 0;
}

.e-customsize.e-checkbox-wrapper .e-check {
    font-size: 20px;
}

.e-customsize.e-checkbox-wrapper .e-ripple-container {
    height: 52px;
    top: -11px;
    width: 47px;
}

.e-customsize.e-checkbox-wrapper .e-label {
    line-height: 30px;
    font-size: 20px;
}

</style>
public ActionResult CustomHeight()
{
    return View();
}

Name and Value in form submit

The name attribute of the CheckBox is used to group Checkboxes. When the Checkboxes are grouped in form, the checked items value attribute will post to the server on form submit that can be retrieved through the name. The disabled and unchecked CheckBox value will not be sent to the server on form submit.

In the following code snippet, Cricket and Hockey are in the checked state, Tennis is in disabled state and Basketball is in unchecked state. Now, the value that is in checked state only be sent on form submit.

razor
form.cs
@section ControlsSection{
    @Html.EJS().CheckBox("cbox2").Name('Sport').Value('Cricket').Label("Cricket").Checked(true).Render()
    @Html.EJS().CheckBox("cbox3").Name('Sport').Value('Hockey').Label("Hockey").Checked(true).Render()
    @Html.EJS().CheckBox("cbox4").Name('Sport').Value('Tennis').Label("Tennis").Render()
    @Html.EJS().CheckBox("cbox1").Name('Sport').Value('Basketball').Label("Basketball").Render()
    @Html.EJS().Button("primarybtn").Content("Submit").IsPrimary(true).Render()
}


<style>

.e-checkbox-wrapper {
  margin-top: 18px;
}

button {
  margin: 20px 0 0 5px;
}

li {
  list-style: none;
}

</style>
public ActionResult Form()
{
    return View();
}

Customized CheckBox

Custom Frame

CheckBox frame can be customized as per the requirement by adding CSS rules.

In the following example, to-do list is displayed with round checkbox by changing border-radius as 100% by adding e-custom class.

razor
customsize.cs
@section ControlsSection{
    @Html.EJS().CheckBox("cbox2").Label("Buy Groceries").Checked(true).CssClass('e-custom').Render()
    @Html.EJS().CheckBox("cbox3").Label("Pay Rent").Checked(true).CssClass('e-custom').Render()
    @Html.EJS().CheckBox("cbox4").Label("Make Dinner").CssClass('e-custom').Render()
    @Html.EJS().CheckBox("cbox1").Label("Finish To-do List Article").CssClass('e-custom').Render()
}


<style>

li {
  list-style: none;
}

.e-checkbox-wrapper {
  margin-top: 18px;
}

.e-custom .e-frame {
  border-radius: 100%;
}

.e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
    content: '\e77d';
}

.e-checkicon.e-checkbox-wrapper .e-check {
    font-size: 8.5px;
}

.e-checkicon.e-checkbox-wrapper .e-frame.e-check {
    background-color: white;
    border-color: grey;
    color: grey;
}

.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: white;
    border-color: grey;
    color: grey;
}

.e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: white;
    border-color: grey;
    box-shadow: none;
    color: grey;
}

</style>
public ActionResult CustomSize()
{
    return View();
}

Custom Check Icon

CheckBox check icon can be customized as per the requirement by adding CSS rules.

In the following example, the check icon can be customized by changing check icon content, background and border color in focus and hovered states by adding e-checkicon class.

razor
customicon.cs
@section ControlsSection{
    @Html.EJS().CheckBox("cbox2").Label("Buy Groceries").Checked(true).CssClass('e-checkicon').Render()
    @Html.EJS().CheckBox("cbox3").Label("Pay Rent").Checked(true).CssClass('e-checkicon').Render()
    @Html.EJS().CheckBox("cbox4").Label("Make Dinner").CssClass('e-checkicon').Render()
    @Html.EJS().CheckBox("cbox1").Label("Finish To-do List Article").CssClass('e-checkicon').Render()
}


<style>

li {
  list-style: none;
}

.e-checkbox-wrapper {
  margin-top: 18px;
}

.e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
    content: '\e790';
}

.e-checkicon.e-checkbox-wrapper .e-check {
    font-size: 8px;
}

.e-checkicon.e-checkbox-wrapper .e-frame.e-check {
    background-color: white;
    border-color: grey;
    color: grey;
}

.e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: white;
    border-color: grey;
    color: grey;
}

.e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: white;
    border-color: grey;
    box-shadow: none;
    color: grey;
}

.e-checkicon.e-checkbox-wrapper .e-ripple-element {
    background: grey;
}

</style>
public ActionResult CustomIcon()
{
    return View();
}

Right-To-Left

CheckBox component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in CheckBox component.

razor
rtl.cs
@section ControlsSection{
    @Html.EJS().CheckBox("cbox2").Label("Default").EnableRtl(true).Render()
}


<style>

.e-checkbox-wrapper {
  margin-top: 18px;
}


li {
  list-style: none;
}

</style>
public ActionResult Rtl()
{
    return View();
}