我想有一个标准复选框的替代品-基本上我想使用图像,当用户单击图像时,将其淡出并覆盖一个复选框。
本质上,我想做像 Recaptcha 2 那样让你点击满足特定标准的图像时所做的事情。您可以在此处查看 Recaptcha 演示,但有时它可能会让您解决文本问题,而不是图像选择。所以这里有一个截图:
当您单击其中一个图像(在本例中,包含一张牛排图片)时,您单击的图像会缩小并出现蓝色勾号,表示您已勾选它。
假设我想重现这个确切的例子。
我意识到我可以有 9 个隐藏的复选框,并附加一些 jQuery,这样当我单击图像时,它会选择/取消选择隐藏的复选框。但是图像的缩小/覆盖刻度呢?
这很容易自行实施,无需预先制定的解决方案。它还会教你很多东西,因为你似乎不太容易使用 CSS。
您的复选框需要具有不同的id属性。<label>这允许您使用标签的for-attribute连接到它。
id
<label>
for
例子:
<input type="checkbox" id="myCheckbox1" /> <label for="myCheckbox1"><img src="http://someurl" /></label>
将标签附加到复选框将触发浏览器行为:每当有人单击标签(或其中的图像)时,复选框将被切换。
接下来,您通过应用例如display: none;来隐藏复选框。
display: none;
现在剩下要做的就是为label::before伪元素设置所需的样式(将用作可视复选框替换元素):
label::before
label::before { background-image: url(../path/to/unchecked.png); }
在最后一个棘手的步骤中,您使用 CSS 的:checked伪选择器在选中复选框时更改图像:
:checked
:checked + label::before { background-image: url(../path/to/checked.png); }
( 相邻兄弟选择器+)确保您只更改直接跟随标记中隐藏复选框的标签。 __
+
您可以通过将两个图像放在一个 spritemap 中并仅应用更改background-position而不是交换图像来优化它。
background-position
当然,您需要正确定位标签并应用display: block;和设置正确的width和height。
display: block;
width
height
我在这些说明之后创建的 codepen 示例和片段使用相同的技术, 但不是使用复选框的图像,而是纯粹使用 CSS 完成复选框替换 ,在标签上创建一个::before,一旦选中,就有content: "鉁�";. 添加一些圆形边框和甜美的过渡,结果真的很讨人喜欢!
::before
content: "鉁�";
这是一个工作代码笔,展示了该技术并且不需要复选框的图像:
http://codepen.io/anon/pen/wadwpx
这是片段中的相同代码:
ul { list-style-type: none; } li { display: inline-block; } input[type="checkbox"][id^="cb"] { display: none; } label { border: 1px solid #fff; padding: 10px; display: block; position: relative; margin: 10px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } label::before { background-color: white; color: white; content: " "; display: block; border-radius: 50%; border: 1px solid grey; position: absolute; top: -5px; left: -5px; width: 25px; height: 25px; text-align: center; line-height: 28px; transition-duration: 0.4s; transform: scale(0); } label img { height: 100px; width: 100px; transition-duration: 0.2s; transform-origin: 50% 50%; } :checked+label { border-color: #ddd; } :checked+label::before { content: "✓"; background-color: grey; transform: scale(1); } :checked+label img { transform: scale(0.9); box-shadow: 0 0 5px #333; z-index: -1; }
<ul> <li><input type="checkbox" id="cb1" /> <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label> </li> <li><input type="checkbox" id="cb2" /> <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label> </li> <li><input type="checkbox" id="cb3" /> <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label> </li> <li><input type="checkbox" id="cb4" /> <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label> </li> </ul>