如何使用 CSS 创建弹出式表单 |
您所在的位置:网站首页 › html如何点击图片弹出文本框内容 › 如何使用 CSS 创建弹出式表单 |
{box-sizing: border-box;} /* 用于打开联系表单的按钮 - 固定在页面底部 */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px;} /* 弹出表单 - 默认隐藏 */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9;} /* 向表单容器添加样式 */ .form-container { max-width: 300px; padding: 10px; background-color: white;} /* 全角输入字段 */ .form-container input[type=text], .form-container input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* 当输入获得焦点时,做一些事情 */ .form-container input[type=text]:focus, .form-container input[type=password]:focus { background-color: #ddd; outline: none;} /* 设置提交/登录按钮的样式 */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8;} /* 为取消按钮添加红色背景颜色 */ .form-container .cancel { background-color: red;} /* 为按钮添加一些悬停效果 */ .form-container .btn:hover, .open-button:hover { opacity: 1;} |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |