如何使用 CSS 创建弹出式表单

您所在的位置:网站首页 html如何点击图片弹出文本框内容 如何使用 CSS 创建弹出式表单

如何使用 CSS 创建弹出式表单

2024-07-11 22:37| 来源: 网络整理| 查看: 265

{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