Home>

Help correct the error in HTML at Input Checkbox, it is for some reason compressing.

But without changing these styles DISPLAY: FLEX; Width: 60px;

.box {
  DISPLAY: FLEX;
  Border: 1px Solid # 333;
  Width: 60px;
  Padding: 3px;
  Overflow: Hidden;
}
INPUT [TYPE= "CheckBox"] {
  width: 16px;
    Height: 16px;
    margin: 0 3px 0 0;
    transform: translatey (1px);
    Background-Color: #FFF;
    Border: 1px Solid RGBA (0, 0, 0, .25);
    Appearance: None;
  background-color: # 0D6EFD;
    Border Color: # 0D62F2;
    Background-image: URL (DATA: Image /SVG + XML,% 3csvg xmlns= 'http: //www.w3.org/2000/svg' viewbox= '0 20 20'% 3e% 3cpath Fill= 'None' STROKE= '% 23FFF' STROKE-LINECAP= 'ROUND' STROKE-LINEJOIN= 'ROUND' STROKE-WIDTH= '4' D= 'M6 10L3 3L6-6' /% 3E% 3C /SVG% 3e);
}
Input [Type= "Checkbox"]: Checked {
    background-color: # 0D6EFD;
    Border Color: # 0D62F2;
    Background-image: URL ("Data: Image /SVG + XML,% 3csvg xmlns= 'http: //www.w3.org/2000/svg' viewBox= '0 20 20'% 3e% 3cpath Fill= 'None 'STROKE='% 23FFF 'STROKE-LINECAP=' ROUND 'STROKE-LINEJOIN=' ROUND 'STROKE-WIDTH=' 4 'D=' M6 10L3 3L6-6 '/% 3E% 3C /SVG% 3E);
} 
<
DIV Class= "Box" >
  ≪
INPUT TYPE= "CHECKBOX" >
 ID12345235235.
≪
/div >
≪
INPUT TYPE= "CHECKBOX" >

You limited the width of the Flex container. By default, it builds subsidiaries and text nodes into a horizontal range, without transfer. They do not fit, someone has to be touched. If instead of width use min-width: 16px, that checkbox will not shrink less than 16px.

Alexey Vladimirov2021-08-24 21:34:27

If you need to extend the INPUT, which is out .Box simply ask him width more if you need to expand the Input inside .box, set for .box overflow: visible In addition to the Input width

highpassion2021-08-24 23:41:41