product - 如何使用顶/底线和插入符号来设置 Squarespace 产品下拉/选择元素的样式?
问题描述
我正在寻找一种方法来设计我的产品块以使其更具吸引力......现在,块尽可能简单:http ://www.dachshund-crane-s64k.squarespace.com/新页面(密码为“密码”)。最初的想法是顶部一行,底部一行 + 右侧的箭头,例如https://www.gfsmith.com/cranes-crest-pearl-white-watermarked。提前感谢您的帮助和建议。
解决方案
示例站点正在使用带有 JavaScript 的自定义下拉实现(实际上甚至根本没有使用select
/dropdown 元素)。因此,菜单的动态变化外观(增长/缩小、插入符号旋转等)不能单独使用 CSS 来实现,并且需要对 Squarepspace 自己的 UI 进行相当耗时的重写,以便仔细完成,以免打破 Squarespace 的默认电子商务功能。
话虽如此,通过 CSS 编辑器添加以下 CSS 可以在现代浏览器中使用 CSS 实现顶线和底线以及向下的插入符号(旧浏览器可能不支持这一点):
.variant-option {
margin-bottom: 0 !important;
}
.variant-select-wrapper {
position: relative;
}
.variant-select-wrapper:after {
content: "";
width: 0.8em;
height: 0.4em;
background-color: #aaa;
clip-path: polygon(100% 0%, 80% 0, 50% 50%, 20% 0, 0 0%, 50% 100%);
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
background-color: transparent;
border-right: none;
border-left: none;
border-top: none;
border-bottom: 1px solid #aaa;
padding: 1em 0;
margin: 0;
width: 100%;
line-height: 1.5em;
cursor: pointer;
border-radius: 0 !important;
}
.variant-option:first-child select {
border-top: 1px solid #aaa !important;
}
推荐阅读
- r - 在 r 中按列对齐数据框
- c - scanf("%[^\n]s") 适用于普通变量,但不适用于 C 中的结构变量
- javascript - Promise.resolve 不带参数
- r - 在 R 合并函数中复制行
- gdb - Gnat Programming Studio:与 GPS 2018 并行安装 gdb 版本 8.0.1 以签署 gdb 代码。经验?
- android - 检查 Android 的 Firebase DB 中是否存在数据
- c# - 如何制作隐形链接?
- forms - jsp中具有共享值的多个表单?
- angular - 角度搜索过滤器
- c++ - 为什么我不能将 && 添加到 Ret (Args...) &?