wannabe programmer wannabe programmer - 4 months ago 22
CSS Question

How to place an animated checklist button right to text

I am using a template form I found which gives me a neat checklist form that I can use for a website I'm trying to develop (I'm doing this to learn)
So I want to know how to make these buttons:

enter image description here

appear on the right side of the text (I want to use RTL language)

To make it easier, here is the fiddle:

https://jsfiddle.net/h1jokddo/

I tried to modify the css code, adding "margin: right" to some of the properties but no luck:

body {
background: #069ffb;
color: #fff;
}

.ac-custom {
padding: 0 3em;
max-width: 900px;
margin: 0 auto;
}

.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}

.ac-custom li {
margin: 0 auto;
padding: 2em 0;
position: relative;
}

.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}

.ac-custom input[type="checkbox"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}

.ac-custom label::before {
content: '';
border: 4px solid #fff;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.ac-radio label::before {
border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label {
color: #fff;
}

.ac-custom input[type="checkbox"]:checked + label::before {
opacity: 0.8;
}


/* General SVG and path styles */

.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 5px;
pointer-events: none;
}

.ac-custom svg path {
stroke: #fdfcd3;
stroke-width: 13px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}


/* Box Fill */

.ac-boxfill svg path {
stroke-width: 8px;
}


I need to know what to change there.
As I stated before, this is something I'm doing in order to learn, this is how I learn at least, I take something that is already working, and try to find out what makes everything work.

Answer

Add the below code at the end of your css

.ac-custom label {
  padding: 0;
}
.ac-custom input[type="checkbox"], .ac-custom label::before {
    left: 40px;
}
.ac-custom svg {    
    top: 54%;
    left: 49px;
}

Updated : https://jsfiddle.net/h1jokddo/4/

Comments