CSS 选项卡 - 内容周围有边框，但不在活动选项卡底部

Question

我有下面的代码，到目前为止运行良好。 我的问题是，我想要内容周围有边框，但不在活动选项卡的底部。因此，我无法轻松地在内容周围设置边框，因为禁用活动选项卡底部没有效果。如果我将边框设置为内容的左侧、右侧和底部，则内容的顶部就没有边框。

HTML：

<div id="containerUser">
    <div class="tabsUser">
        <input type="radio" name="tabsUser" id="tabOne" checked="checked">
        <label for="tabOne">
            <i class="bi bi-eye-fill"></i> <span>Overview</span></label>
        <div class="userContent">
            Content Tab 1
        </div>

        <input type="radio" name="tabsUser" id="tabTwo">
        <label for="tabTwo">
            <i class="bi bi-key-fill"></i> <span>Access</span></label>
        <div class="userContent">
            Content Tab 2
        </div>
    </div>
</div>

CSS：

#containerUser {
    margin-right: 10px;
}

#containerUser .userContent {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}

#containerUser .tabsUser {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Make sure it wraps */
}

#containerUser .tabsUser label {
    order: 1;
    display: block;
    padding: 5px 20px;
    margin-right: 5px;
    cursor: pointer;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: bold;
    transition: background ease 0.2s;
    width: 150px;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}

#containerUser .tabsUser .userContent {
    order: 99;
    flex-grow: 1;
    width: 100%;
    height: 300px;
    display: none;
    padding: 1rem;
    background: #fff;
}

这就是现在的样子。

这就是它应该的样子。

Answer 1

使用相对定位将选项卡向下移动边框的宽度，以便它们与内容区域的边框重叠。然后只需显示或隐藏选项卡的底部边框即可。

#containerUser {
    margin-right: 10px;
}

#containerUser .userContent {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}

#containerUser .tabsUser {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Make sure it wraps */
}

#containerUser .tabsUser input {
  visibility: hidden;
}

#containerUser .tabsUser label {
    order: 1;
    display: block;
    padding: 5px 20px;
    margin-right: 5px;
    cursor: pointer;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: bold;
    transition: background ease 0.2s;
    width: 150px;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid rgb(0 0 0 / 0.3);
    position: relative;
    top: 1px;
}

#containerUser .tabsUser .userContent {
    order: 99;
    flex-grow: 1;
    width: 100%;
    height: 300px;
    padding: 1rem;
    background: #f5f5f5;
    border: 1px solid rgb(0 0 0 / 0.3);
    border-radius: 10px;
    display: none;
}

#containerUser .tabsUser input:checked + label {
    border-bottom: 0;
}

#containerUser .tabsUser input:checked + label + .userContent {
  display: block;
}

<div id="containerUser">
    <div class="tabsUser">
        <input type="radio" name="tabsUser" id="tabOne" checked="checked">
        <label for="tabOne">
            <i class="bi bi-eye-fill"></i> <span>Overview</span></label>
        <div class="userContent">
            Content Tab 1
        </div>

        <input type="radio" name="tabsUser" id="tabTwo">
        <label for="tabTwo">
            <i class="bi bi-key-fill"></i> <span>Access</span></label>
        <div class="userContent">
            Content Tab 2
        </div>
    </div>
</div>