时间戳

首页 > 解决方案 > scss - 设置父级似乎不起作用

css - scss - 设置父级似乎不起作用

问题描述

我有以下代码：

 <div class="input-group want-outline">
        <input class="form-control no-outline @(IsValid ? "" : "is-invalid")"
               type="text"......

这是我的scss：

.no-outline:focus {
    box-shadow: none;

    &.want-outline {
        border-radius: 2.5rem;
        border-color: #80bdff;
        border-width: 0.2rem;
    }
}

当输入获得焦点时，它会正确地将 box-shadow 设置为 none，但不会将边框细节应用于父级。我也试过：

 & { border-radius.....

和

 > & { border-radius.....

参考父母，这些也不起作用。

标签： csssass

解决方案

您可以在focus-within样式属性上设置边框，当焦点在其中时（即 - 当其中的输入具有焦点时，它将将样式应用于父元素。以下使用直接 css，但可以轻松转换为 scss .

请注意，IE 根本不支持这种样式属性（https://caniuse.com/?search=focus-within）但真的谁在乎 ie？:)

另外 - 您的边框问题可能是因为您没有设置边框类型（例如“实线/虚线/点线”） - 我倾向于在大多数情况下在速记版本中设置所有边框样式。

.no-outline:focus {
    box-shadow: none;
}

  .want-outline {
      padding: 16px;
      border-radius: 2.5rem;
      display: inline-block;
      border: solid 0.2rem transparent;
  }
  
  .want-outline:focus-within {
     border-color: #80bdff;
  }
<div class="input-group want-outline">
   <input class="form-control no-outline" type="text" placeholde="enter txt"/>
<div>

推荐阅读