0

I've searched a lot in this forum for this question but it seems like there is no answer yet.

I want to create a login form with a centered input of type checkbox. I removed the normal style of the checkbox using this code (It's .scss code):

input[type=checkbox] {
margin: auto;
margin-bottom: $fs-h2;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: $fs-h3;
height: $fs-h3;
position: relative;
top: 0;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}

And also I've used pseudo elements to assign my own style, using ::before and ::after.

Now the problem is, that the checkbox is not centered because the ::after pseudo element has a text as content which is pretty long and uses white-space: nowrap; to be on one line.

Is there a possibility to include the pseudo elements width's when using translate on the "parent" element?

This is the code for the pseudo elements:

input[type=checkbox]::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid $clr-LightBlue;
    border-radius: 0.2rem; 
    transition: all 0.2s ease;
}

input[type=checkbox]::after {
    content: 'Benutzerdaten speichern';
    position: absolute;
    color: $clr-LightBlue;
    font-size: $fs-default;
    line-height: $fs-default;
    transform: translate(25%,25%);
    white-space: nowrap;
    transition: all 0.2s ease;
}
ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
Basti0208
  • 3
  • 2
  • 1
    `input ` elements don't usually support presudo-elements, especially not checkboxes. – Paulie_D Sep 25 '18 at 11:07
  • https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field – Paulie_D Sep 25 '18 at 11:09
  • Plus, explanatory text content like this doesn’t belong into the stylesheet in the first place. This should be a `label`! – misorude Sep 25 '18 at 11:27
  • For the custom checkbox, you can have a look on this link... https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox It may help you to achieve custom styles for the check box – sajee Sep 25 '18 at 11:57

0 Answers0