求助：实现颜色样本悬停/选中时带白隙的黑色边框效果

我想给颜色样本实现这样的效果：鼠标悬停或选中样本时，样本外围显示黑色实边框，且样本和边框之间留一小段白色间隙。我试着用放大样本尺寸、加白色边框包裹黑色边框的方式模拟间隙，但实现出错了——选中变体时边框只短暂过渡一下，之后就消失了。

原问题代码 #

CSS代码 #

.color-swatches {
  display: flex;
}

.color-swatch {
  display: inline-block;
  width: 30px; /* 调整每个颜色样本的宽度 */
  height: 30px; /* 调整每个颜色样本的高度 */
  margin-right: 15px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.color-swatch::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 3px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  z-index: -1;
}

.color-swatch:hover::before,
.color-swatch input[type="radio"]:checked + span::before {
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid white;
}

.color-swatch input[type="radio"] {
  display: none;
}

.color-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #4b4b4b;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.color-swatch input[type="radio"]:checked + span {
  border-color: #000;
  transform: scale(1.2); /* 选中时放大样本 */
}

.color-swatch input[type="radio"]:checked + span::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #000;
  border-radius: 3px;
  transform: scale(1.2); /* 放大模拟间隙的边框 */
  transition: transform 0.3s ease;
}

.color-swatch input[type="radio"]:checked + span:hover::after {
  transform: scale(1.3); /* 选中且悬停时进一步放大边框 */
}

Liquid/HTML代码 #

<legend class="form__label" id="option-{{ option.name | handle }}">{{ option.name }}: <span id="selected-{{ option.name | handle }}">{{ option.selected_value }}</span></legend>
 <div class="color-swatches">
       {%- for value in option.values -%}
           {%- assign variant = product.variants | where: option.name, value | first -%}
           {%- assign swatchColor = '' -%}
           {%- case value -%}
               {%- when 'Pink' -%}
                   {%- assign swatchColor = '#E3BAB3' -%}
               {%- when 'Lilac' -%}
                   {%- assign swatchColor = '#CBB9E0' -%}
               {%- when 'Navy' -%}
                   {%- assign swatchColor = '#415873' -%}
               {%- when 'Red' -%}
                   {%- assign swatchColor = '#D63238' -%}
               {%- when 'Tan' -%}
                   {%- assign swatchColor = '#E1BC9F' -%}
               {%- else -%}
                   {%- assign swatchColor = '' -%}
           {%- endcase -%}
           <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="color-swatch" style="background-color: {{ swatchColor }};">
               <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                   name="{{ option.name }}"
                   value="{{ value | escape }}"
                   form="{{ product_form_id }}"
                   {% if option.selected_value == value %}checked{% endif %}
                   onchange="updateSelectedValue('{{ option.name | handle }}', '{{ value | escape }}')"
               >
               <span></span>
           </label>
       {%- endfor -%}
   </div>

问题分析 #

1. .color-swatch 设置了 overflow: hidden，导致选中时放大的元素和伪元素被裁剪，边框因此消失。
2. 伪元素的层级和定位逻辑混乱，::before 和 ::after 的作用重叠冲突。
3. 选中状态下的缩放逻辑没有预留足够外部空间，元素被截断。

修复后的代码 #

修正后的CSS代码 #

.color-swatches {
  display: flex;
  align-items: center;
}

.color-swatch {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  cursor: pointer;
  position: relative;
  /* 移除overflow:hidden，避免裁剪放大后的元素 */
}

.color-swatch input[type="radio"] {
  display: none;
}

/* 核心：用label的伪元素实现黑色边框+白色间隙 */
.color-swatch::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  /* 默认状态：隐藏边框 */
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1;
}

/* 悬停/选中时显示边框和间隙 */
.color-swatch:hover::after,
.color-swatch input[type="radio"]:checked ~ span {
  & + .color-swatch::after {
    opacity: 1;
    /* 白色间隙：通过padding实现，外层是黑色边框 */
    padding: 3px;
    background-clip: content-box;
    background-color: #fff;
    border: 2px solid #000;
  }
}

.color-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #4b4b4b;
  border-radius: 5px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

/* 选中时放大样本，突出显示 */
.color-swatch input[type="radio"]:checked + span {
  border-color: #000;
  transform: scale(1.1);
}

修正后的Liquid/HTML代码（适配CSS结构） #

<legend class="form__label" id="option-{{ option.name | handle }}">{{ option.name }}: <span id="selected-{{ option.name | handle }}">{{ option.selected_value }}</span></legend>
 <div class="color-swatches">
       {%- for value in option.values -%}
           {%- assign variant = product.variants | where: option.name, value | first -%}
           {%- assign swatchColor = '' -%}
           {%- case value -%}
               {%- when 'Pink' -%}
                   {%- assign swatchColor = '#E3BAB3' -%}
               {%- when 'Lilac' -%}
                   {%- assign swatchColor = '#CBB9E0' -%}
               {%- when 'Navy' -%}
                   {%- assign swatchColor = '#415873' -%}
               {%- when 'Red' -%}
                   {%- assign swatchColor = '#D63238' -%}
               {%- when 'Tan' -%}
                   {%- assign swatchColor = '#E1BC9F' -%}
               {%- else -%}
                   {%- assign swatchColor = '' -%}
           {%- endcase -%}
           <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="color-swatch">
               <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                   name="{{ option.name }}"
                   value="{{ value | escape }}"
                   form="{{ product_form_id }}"
                   {% if option.selected_value == value %}checked{% endif %}
                   onchange="updateSelectedValue('{{ option.name | handle }}', '{{ value | escape }}')"
               >
               <span style="background-color: {{ swatchColor }};"></span>
           </label>
       {%- endfor -%}
   </div>

关键修改点说明 #

1. 移除了 .color-swatch 的 overflow: hidden，避免裁剪放大后的元素和边框。
2. 用 label::after 统一实现黑色边框+白色间隙：通过 padding:3px 实现白色间隙，background-clip:content-box 让白色只填充padding区域，外层加黑色边框。
3. 调整颜色背景的位置，把 background-color 移到 span 上，避免和label的伪元素冲突。
4. 简化选中和悬停的状态逻辑，让样式更稳定，不会出现边框消失的问题。

内容的提问来源于stack exchange，提问作者joejplant