div+cs显示下拉框伸缩显示更多文字详情代码
代码语言:html
所属分类:布局界面
代码描述:div+cs显示下拉框伸缩显示更多文字详情代码
代码标签: div css 下拉框 伸缩 显示 更多 文字 详情 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap");html { box-sizing: border-box; font-size: 18px; font-family: "Roboto",sans-serif } body { background: #edf2f7; color: #4a5568; height: 100% } *,*:before,*:after { box-sizing: inherit } details { font-size: 1rem; margin: 7em auto; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04); width: 100%; background: #fff; border-radius: 8px; position: relative; width: 500px } details .summary-title { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } details:hover { cursor: pointer } details .summary-content { border-top: 1px solid #e2e8f0; cursor: default; padding: 1em; font-weight: 300; line-height: 1.5 } details summary { list-style: none; padding: 1em } details summary:focus { outline: 0 } details summary:hover .summary-chevron-up svg { opacity: 1 } details .summary-chevron-up svg { opacity: .5 } details .summary-chevron-up,details .summary-chevron-down { pointer-events: none; position: absolute; top: .75em; right: 1em; background: #fff } details .summary-chevron-up svg,details .summary-chevron-down svg { display: block } details summary::-webkit-details-marker { display: none } </style> </head> <body> <details&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0