Appearance of checkboxes

[boborbt]

As a personal preference, I don't find the current default styling of checkboxes particularly attractive:

After playing a bit with the stylesheet I ended up with:

Using the following css:

input[type=checkbox] {
    padding-left:5px;
    padding-right:5px;
    border-radius:2px;

    -webkit-appearance:button;

    border: solid 1px #DDD;

    background-color: #FFF;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    position: relative;
    top: 1px;

    width:11px;
    height:11px;
}

input[type=checkbox]:checked {
    border-radius:2px;
    color: black;
}

input[type=checkbox]:before {
    content: "\2713";
    position:relative;
    top: -1px;
    left: -3px;
}

I wonder if the above solution may be of general interest and if you would like to receive a pull request that adds that code to the default style sheet (if you do prefer to add it yourself feel free to use it at your discretion).

I am no designer and better designs certainly are easily achievable. Also, the above code works well with the default styling, but it is likely to break as soon as default size for fonts and other elements are changed.

[lucasvieites]

Hi, I've tried this and it looks much better than the default. This is a +1 for me.

[cakebake]

Thanks for the contribution! Will flow into the next version!

[cakebake]

Hello, sorry, but I will no longer maintain the project.

This project is archived because the owner no longer uses the Atom Editor.

It would be very good to find a new owner for this project, who will take care of updating and expanding the Atom package. A new version based on Chrome Headless has already been prepared in a feature branch.