我在沙盒化页面中有一个 iframe 以禁止 JavaScript。
当用户点击表单的提交按钮时,没有视觉指示器提示用户正在发生某些事情。
有没有一种方法可以在不启用 javascript 的情况下使用 CSS 来显示正在发生的事情?
例如
1:按钮上的动画在用户单击它时启动并运行 5 秒。
2:<form>
上的伪元素只有在提交表单时才会出现。
3:在尝试导航时以不同方式设置 IFrame 的样式。
有什么吗?
最佳答案
你可以试试下面的方法:
form {
padding: 20px;
}
[type=submit] {
padding: 10px 40px;
border:none;
font-size:20px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
position:relative;
overflow: hidden;
}
[type=submit]:before {
content: "";
position: absolute;
right: -30px;
width: 12px;
aspect-ratio: 1;
border: 4px solid;
border-radius:50%;
border-color: red red red #0000;
animation: r 1s infinite linear;
transition: 0s 5s; /* will disappear after 5s */
}
@keyframes r {
to{transform:rotate(360deg)}
}
/* on button click you show the loader */
[type=submit]:active:before {
right: 12px;
transition: 0s;
}
/* when someone navigate inside the iframe you can use hover on the html element */
html:hover {
background:#fafafa;
}
<button type="submit" form="f1">Send</button>
关于css - 直观地指示 IFrame 内的表单正在提交,但没有 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72980457/