我在一个页面中有一个iframe,它是Sandbox ,不允许使用JavaScript.

当用户单击表单的提交按钮时,用户看不到发生了什么事情的视觉指示器.

有没有一种方法可以在不需要启用javascript的情况下使用CSS来显示正在发生的事情?

例如

有什么事吗?

推荐答案

您可以try 以下操作:

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相关问答推荐

无法瞄准元素

隐藏div后缺少div的InnerHTML

如何使用css::Part()定位Web组件shadowDOM中的第N个元素

使用tailwind 将父div限制为其具有溢出的最短子级的高度

如何使用混合混合模式更改动画背景上的文本 colored颜色

如何将动态参数从react tsx文件发送到css

基于高度的容器查询不起作用

当前的 html 标签没有发生两列布局

在 WooCommerce 变体 Select 中转换属性文本以大写

react 样式的条件类名称设置

如何在每一行周围放置不同大小的阴影?

左右卡片的 OwlCarousel 导航:react js

CSS:背景图像和填充

如何始终在浏览器中显示垂直滚动条?

如何动态生成用逗号分隔的类列表?

如何在 javascript 中获取 HTML 元素的样式值?

flex-wrap 如何与 align-self、align-items 和 align-content 一起使用?

让 div 占据 100% 身体高度,减go 固定高度的页眉和页脚

名称-值对的语义和 struct

如何将 HTML
显示为内联元素?