Css 不带圆形但带矩形标签的单选按钮

我在Hollister上看到了这个有趣的尺码选择：

看起来这些是单选按钮和标签的组合

<ul class="tiles" data-tile-size="large" data-tile-layout="collapsed">

<li>
<div class="tile-input product-attrs__attr " data-state="default">
    <input type="radio" value="XS" name="size-primary" data-size="radio_size_primary_XS_30342822" aria-describedby="product-primary-size-tiles" id="radio_size_primary_XS_30342822"/>
    <label class="tile-content" for="radio_size_primary_XS_30342822" data-variant="default">
    <span class="tile-text">XS</span>       
    </label>
</div>
</li>

</ul>

XS

但是他们的CSS非常混乱，我不知道他们是如何设计的：(

---

有机会解决这个问题吗？谢谢！！！

使用一些CSS，您可以通过设置

span标记的样式来实现这一点

我在这里玩

退房


/*容器*/
.集装箱{
显示：块；
位置：相对位置；
左侧填充：35px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*隐藏浏览器的默认单选按钮*/
.容器输入{
位置：绝对位置；
不透明度：0；
光标：指针；
}
/*创建自定义单选按钮*/
.对号{
位置：绝对位置；
排名：0；
左：0；
高度：25px；
宽度：25px；
背景色：#eee；
边界半径：0；
}
/*在鼠标悬停时，添加灰色背景色*/
.container:悬停输入~。选中标记{
背景色：#ccc；
}
/*选中单选按钮后，添加蓝色背景*/
.container输入：选中~.checkmark{
背景色：#2196F3；
}
/*创建指示器（点/圆-未选中时隐藏）*/
.勾选：之后{
内容：“；
位置：绝对位置；
显示：无；
}
/*选中时显示指示器（点/圆）*/
.容器输入：选中~。选中标记：之后{
显示：块；
}
/*设置指示器的样式（点/圆）*/
.容器。选中标记：之后{
顶部：9px；
左：9px；
宽度：8px；
高度：8px；
边界半径：0；
背景：白色；
}
自定义单选按钮
一
二
三
四
方法是用标签包装输入和跨距，然后隐藏输入并设置跨距样式，使其看起来像您希望按钮的样子

单击范围时，将自动选中/取消选中输入（因为它们位于标签内），并且您可以使用input:checked+span（这意味着选中输入的下一个同级范围）更改范围的样式


。输入容器{
显示器：flex；
}
输入{
位置：绝对位置；
不透明度：0；
宽度：0；
身高：0；
}/*这将保持输入的可访问性。不要只显示：无*/
输入：选中+span{
背景色：#000；
颜色：#fff；
}
跨度{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：60px；
高度：40px；
边框：1px实心#000；
右边界：0；
背景色：#fff；
光标：指针；
字体大小：12px；
}
标签：span类型的最后一个{
右边框：1px实心#000；
}

XS
s
M
L
特大号
XXL
在此处搜索自定义单选按钮。我做了100个结果，但都是关于更改“单选”样式。