bootstrap4 Reboot details summary 美化（点选机制选中，单行隐

发布时间：2020-12-17 20:45:33 所属栏目：安全来源：网络整理

导读：? 原始HTML details summary Some details / summary p More info about the details. / p / details ? 原始效果 ?? ?原始效果演示点击 ?https://v4.bootcss.com/docs/4.0/content/reboot/#summary ? 新HTML （增加class="single-line"） h4 单行 / h4 deta

原始HTML

<details>
    <summary>Some details</summary>
    <p>More info about the details.</p>
</details>

?原始效果

?原始效果演示点击?https://v4.bootcss.com/docs/4.0/content/reboot/#summary

新HTML（增加class="single-line"）

<h4>单行</h4>
<details>
    <summary class="single-line">Some details</summary>
</details>
<br />
<h4>多行</h4>
<details>
    <summary>Some details</summary>
    <p>More info about the details.</p>
</details>

美化效果

增加CSS

details summary {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version,currently
not supported by any browser */
}

    details summary + p {
        padding-left: 1.35em;
    }

    details summary:focus {
        outline: none;
    }

/*Chrome*/
details > summary.single-line::-webkit-details-marker {
    visibility: hidden;
}
/*Firefox*/
details > summary.single-line:first-of-type {
    list-style: none inside url(data:image/gif;base64,R0lGODlhCgABAIAAAP///wAAACH5BAEAAAAALAAAAAAKAAEAAAIDhI8FADs=);
}

如非上述描述的效果，请自行调整，欢迎留言与我交流。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!