: invalid 의사 클래스로 라디오 버튼과 확인란의 스타일을 지정하는 데 문제가 있었기 때문에 플랫폼 네이티브 라디오 버튼을 사용자 지정 컨트롤로 대체했습니다. https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/에-webkit-appearance: none; 설명 된 방식으로 사용 했습니다 . 또한 Bootstrap의 사용자 지정 컨트롤 처럼 컨트롤의 크기를 16px로 줄 였습니다.. 안타깝게도 Windows 화면 설정에서 크기 조정이 활성화 된 경우 라디오 버튼 점이 중앙에 똑같이 위치하지 않습니다. 특히 포함 된 버튼을 여러 번 클릭하면 볼 수 있습니다. 선택한 라디오 버튼 내부의 점은 라디오 버튼을 기준으로 이동합니다. 점은 중앙 중앙에 있어야하지만 때로는 1 픽셀 (또는 절반 픽셀?)을 왼쪽 또는 오른쪽으로 이동합니다. 스케일링이 없으면 (스케일링은 100 %) 문제가 발생하지 않습니다. 125 % 배율에서 점은 4 버튼 클릭 주기로 이동합니다. 배율이 150 %이면 점이 2 버튼 클릭 주기로 이동합니다.
문제는 이론적 일뿐만 아니라 실용적입니다. 작은 라디오 버튼에서 점이 중간에 있지 않다는 것이 매우 눈에 띄기 때문입니다.
이 라디오 도트를 중앙에 배치하는 데 왜이 문제가 있습니까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif;
color: #222; }
</style>
</head>
<body>
<form id="form1" class="custom-toggles" style="margin-left: 0px;">
<input id="r1" type="radio" value="1" name="radio" checked>
<label for="r1">Radio1</label>
<input id="r2" type="radio" value="2" name="radio">
<label for="r2">Radio2</label>
<br><br>
<button type="button" id="btn1">Move right</button>
</form>
</body>
</html>
.custom-toggles {
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
input[type='radio'] {
-webkit-appearance: none; //don't use platform-native control
-moz-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
border: 1px solid #aaa;
background: white;
outline: none;
}
input[type='radio']:checked {
background: #07f;
border-color: #07f;
}
input[type='radio']:after { //a radio button inner dot
content: '';
display: block;
width: 14px; height: 14px;
border-radius: 50%;
transform: scale(.5);
background: white;
}
}
}
let i = 0;
btn1.addEventListener('click', () => { i++; form1.style.marginLeft = `${i}px`; })
컴퓨터 또는 여기에서 코드를 실행할 수 있습니다. https://codepen.io/iwis/pen/QWjrzvW
웹 브라우저 : Chrome, OS : Windows 10.
.custom-toggles {
position:relative
}
input[type='radio']:after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
position: relative;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
당신은 그것을 시도 할 수 있습니다. 0.5 배율로 점을 만들면 새 크기가됩니다. 14에서 7까지 맞죠? 예를 들어 브라우저를 125 %로 확장하면 점이 너무 확장되어 7 * 1.25 = 8.75px에 도달합니다. 그러나 우리 모두는 8.75px를 보여줄 수있는 완벽한 화면이 없습니다. Thay는 8 ~ 9 개만 표시 할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다