Question

我对checkboxes及其labels有一个共同的课堂。我在两个不同的页面中使用了它们，其中一个页面呈现完美，而另一个页面缺少2个属性（选中的刻度颜色和边框半径）。

这是我的风格

input[type="checkbox"], input[type="radio"] {
vertical-align: middle;
display: inline-block;
margin: 2px 2px 2px 2px;
outline-style: none;

&:checked {
  box-shadow: 0 0 0px 10px fade(@color-interactive, 10%);
  border-radius: 20px;
}
&:hover {
  .hover-bg;
  box-shadow: 0 0 0px 10px fade(@color-interactive, 10%);
  border-radius: 20px;
}

}

用法1（完美还原）：

<div class="form">
<strong>Choices</strong>
<label class="inline"><input type="checkbox" checked> Item 1</label>
</div>

用法2（缺少属性）：

<div class="page-width email-preferences-container form">
<?php if($m->loggedin) { ?>
    <a class="act btn btn-sec" href="/page/"><span class="icon-left-big"></span>   BACK TO MY ACCOUNT</a>
<?php } ?>
<h1>
    Prefs <?= $m->email; ?>
</h1>

<form class="internal-form">
    <div class="ops">
        <h3>Yay!</h3>
        <?php foreach($m->preferences->Overrides as $name => $value) : ?>
            <?php if(array_key_exists($name, $m->preferences->OverrideDisplayNames)) : ?>
                <label class="inline">
                    <input id="<?= $name ?>" type="checkbox" name="<?= $name ?>" class="prefs" <?= $value ? 'checked="checked"' : ''?>>
                    <?= $m->preferences->OverrideDisplayNames[$name] ?>
                </label>
            <?php endif ; ?>
        <?php endforeach ?>
    </div>
</form>
</div>

在控制台中检查后，我发现在Styles选项卡中所有内容都相同，但是在Computed选项卡中，border-radius是0px而不是{{1} }

计算后元素样式会自动更改

0 个答案: