CODEWITHSUNDEEP
htmlcsscheckbox
Arun Kumar
Arun Kumar

Reputation: 1667

How to increase size of checkbox content css?

How can i change the font size after selected checkbox content

This is my Code

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom, .checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom-label {
  position: relative;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: ' ';
  background: transparent;
  border: 1px solid #666666;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  background: transparent;
  border: 1px solid #666666;
  content: 'X';
}
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">checkbox1</label>
</div>

After Selected the checkbox

content: 'X';

font size increase . if is possible ??

This is my FIDDLE

current output

Current output

Expecting Output Expecting output

Upvotes: 0

Views: 4402

Answers (2)

haxxxton
haxxxton

Reputation: 6442

If you want it to look like lines, as per your picture, you could leverage background image gradient's.

To calculate 16.5-17.5 for the line, we use pythagoras' theorum. height and width of your checkbox being (20px + 2px + 2px = height + padding + padding) 24. So sqrt(24*2 + 24*2) = sqrt(1152) = 33.94 = ~34. We want the half way point, so divide by 2, 34 / 2 = 17, and we want it to be a 1px line, so move .5 of a pixel either side of 17 = 16.5-17.5.

If you want to "fatten" the line, simply reduce and increase the numbers 16.5 and 17.5 respectively.

.checkbox-custom:checked + .checkbox-custom-label:before {
    background-image:
        linear-gradient(45deg, transparent, transparent 16.5px, black 16.5px, black 17.5px, transparent 17.5px, transparent),
        linear-gradient(-45deg, transparent, transparent 16.5px, black 16.5px, black 17.5px, transparent 17.5px, transparent);
}

UPDATED FIDDLE

PS. dont forget to look at vendor prefixing if you are going to use this in production, there are a number of tools to do this, but the easiest being: in JSFiddle, set your cursor on a line that contains one of the linear-gradient styles and hit the TAB key (Prefixed fiddle).

Upvotes: 4

Grak T
Grak T

Reputation: 26

.checkbox-custom {
    height: 50px;
    width: 300px;
}

I hope this helps you.

Upvotes: -1

Related Questions