欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

縮放時自定義復選框(單選)不居中

CSS
傅智翔2年前8瀏覽0評論

我正在為chrome瀏覽器寫一個擴展。帶有兩個自定義復選框和標簽的塊被添加到我需要的頁面。問題是，當縮放頁面時，單選按鈕的內部選擇開始表現奇怪，改變形狀并移出中心Checkboxes page scaling

我想不出是什么導致了這個問題。我已經為before元素嘗試了不同的定位選項，但是它只適用于一種頁面比例。ChatGPT和YouTube上的印度人也沒幫上忙。你是我最后的希望:(下面是我的script.js代碼和styles style.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;
}

提前感謝您的回復！

問題在任何縮放級別都存在，只是在較低的縮放級別不容易看到。

為了使定位絕對準確，使其與尺寸相對，即使用%值。特別要注意的是，要使偽元素居中，你可以給它的頂部和左側值50%(這是相對于“父元素”)然后平移-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>