css 缩放时自定义复选框(单选)未居中

bkhjykvo 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(117)

我正在为Chrome浏览器编写一个扩展。一个带有两个自定义复选框和标签的块被添加到我需要的页面。问题是，当缩放页面时，收音机的内部选择开始表现奇怪，改变形状并移出中心x1c 0d1x
我不知道是什么引起了这个问题。我尝试了before元素的不同定位选项，但它只适用于一个页面比例。ChatGPT和YouTube上的印度人没有帮助。你是我最后的希望：（这里是我的script.js代码和stylesstyle.css
script.js

const user_abuser_block = document.createElement('div');
user_abuser_block.classList.add('user_abuser_block');
user_abuser_block.style.zIndex = '9999';
document.body.appendChild(user_abuser_block);

const checkbox1 = document.createElement('input');
checkbox1.classList.add('checkbox-container');
checkbox1.setAttribute('type', 'checkbox');
checkbox1.setAttribute('checked', true);

const enabledLabel = document.createElement('label');
enabledLabel.classList.add('label-container');
enabledLabel.appendChild(checkbox1);
enabledLabel.appendChild(document.createTextNode('Enabled'));
user_abuser_block.appendChild(enabledLabel);

const checkbox2 = document.createElement('input');
checkbox2.classList.add('checkbox-container');
checkbox2.setAttribute('type', 'checkbox');

const disabledLabel = document.createElement('label');
disabledLabel.classList.add('label-container');
disabledLabel.appendChild(checkbox2);
disabledLabel.appendChild(document.createTextNode('Disabled'));
user_abuser_block.appendChild(disabledLabel);

style.css

.user_abuser_block {
  position: fixed;
  top: 67px;
  left: 528px;
  width: 223px;
  height: 110px;
  border-radius: 13px;
  padding-top: 12px;;
  padding-left: 12px;;
}

.checkbox-container {
  left: -4px;
  top: -1px;
  position: relative;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  vertical-align: middle;
  border: 0.1em solid #656565;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  margin-right: 2px;
}

.checkbox-container:checked {
  position: relative;
  border: 0.1em solid #71aaeb;
}

.checkbox-container:checked::before {
  content: "";
  position: absolute;
  transform-origin: center;
  width: 0.6em;
  height: 0.6em;
  background-color: #71aaeb;
  border-radius: 50%;
  transform: translate(25%, 25%);
}

.label-container {
  cursor: pointer;
  display: block;
  margin-bottom: 5px;
}

提前感谢您的回复！

css

来源：https://stackoverflow.com/questions/76245582/custom-checkbox-radio-not-centred-while-zooming

1条答案

按热度按时间

a64a0gku1#

问题是在任何缩放级别，它只是不容易在较低的缩放级别可见。
要使定位绝对准确，就要使它与定尺相对，即使用%值。特别要注意的是，要使before伪元素居中，可以给予顶部和左侧设置50%的值（这是相对于'parent'），然后平移-50%（这是相对于其自身的尺寸）。

<body>aeh
</body>
<script>
  const user_abuser_block = document.createElement('div');
  user_abuser_block.classList.add('user_abuser_block');
  user_abuser_block.style.zIndex = '9999';
  document.body.appendChild(user_abuser_block);

  const checkbox1 = document.createElement('input');
  checkbox1.classList.add('checkbox-container');
  checkbox1.setAttribute('type', 'checkbox');
  checkbox1.setAttribute('checked', true);

  const enabledLabel = document.createElement('label');
  enabledLabel.classList.add('label-container');
  enabledLabel.appendChild(checkbox1);
  enabledLabel.appendChild(document.createTextNode('Enabled'));
  user_abuser_block.appendChild(enabledLabel);

  const checkbox2 = document.createElement('input');
  checkbox2.classList.add('checkbox-container');
  checkbox2.setAttribute('type', 'checkbox');

  const disabledLabel = document.createElement('label');
  disabledLabel.classList.add('label-container');
  disabledLabel.appendChild(checkbox2);
  disabledLabel.appendChild(document.createTextNode('Disabled'));
  user_abuser_block.appendChild(disabledLabel);
</script>
<style>
  .user_abuser_block {
    position: fixed;
    top: 67px;
    rleft: 528px;
    width: 223px;
    height: 110px;
    border-radius: 13px;
    padding-top: 12px;
    padding-left: 12px;
  }
  
  .checkbox-container {
    left: -4px;
    top: -1px;
    position: relative;
    width: 1.05em;
    height: 1.05em;
    border-radius: 50%;
    vertical-align: middle;
    border: 0.1em solid #656565;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    margin-right: 2px;
  }
  
  .checkbox-container:checked {
    position: relative;
    border: 0.1em solid #71aaeb;
  }
  
  .checkbox-container:checked::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 60%;
    left: 50%;
    top: 50%;
    background-color: #71aaeb;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  
  .label-container {
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
  }
</style>

赞(0）回复(0）举报 2023-05-19

我来回答

css 缩放时自定义复选框(单选)未居中

1条答案

相关问题

热门标签

最新问答