程序员经验分享-hwhale

更改提交按钮行为的更合适的方法[重复]

2024-04-30

是的，我以前问过这个here https://stackoverflow.com/questions/62268305/whitespace-in-wrapped-form-element但没有一个答案是合适的，或者它们破坏了网站内的其他内容，所以我选择再次发布它，希望有一个更简单的方法可能，并且这个问题变得更容易理解。

我有这个表格：

::placeholder {
    color: #000000;
}

input[type=name],
input[type=textarea],
input[type=submit] {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 30px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
}

.site-input-container {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.site-message-container {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    margin-bottom: 10px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.site-form-holder {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 190px;
    max-height: 190px;
    padding: 15px;
    resize: none;
    display: inline-block;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border-radius: 30px;
}

input[type=submit]:hover {
    background-image: linear-gradient(-45deg, #006699, #9900CC);
    color: #FFFFFF;
}
<div class="site-form-holder">
  <form method="post" name="process" action="process" autocomplete="off">

    <div class="site-input-container">
      <input type="name" id="forename" name="forename" placeholder="Forename" required=""> <br>
    </div>

    <div class="site-message-container">
      <textarea name="message" id="message" placeholder="Your message." maxlength="1000" required=""></textarea>
    </div>


    <div class="site-input-container site-submit-container">
      <input type="submit" name="submit" id="submit" value="Contact Us" required="">
    </div>
  </form>
</div>

需要注意的是，是的，我知道 name 不是输入类型，但我已经定义了它，以便 html 更容易让其他人理解。我还必须包含所有输入，以便浏览器内的自动完成功能不会删除背景图像边框。

我的问题在于提交按钮，因为有一个大纲。这次我包含了更完整的代码，希望它能够坚持使用十六进制颜色并使问题更容易解决。

问题是，当按钮悬停在上方时，会出现如下所示的空白：

和这个：

我在这里发布了这个问题，并提供了更完整的表单视图以及更多代码，希望能够找到比原始方法更好的方法，因为它们都无法组合在一起。

任何方法都可以使按钮完全填充而没有任何白色轮廓。我无法删除边框，因为按钮可以暂时更改大小，看起来像一个小故障。

EDIT该方法在answer https://stackoverflow.com/a/62354280/12007347 from 布莱斯·豪威森 https://stackoverflow.com/users/6268914/bryce-howitson很接近，但是当你仔细观察时（它在移动设备上更普遍），你会发现渐变并不完全匹配。它在桌面上只是短暂的悬停，但在移动设备上会持续更长时间。

如果有一种方法可以让它看起来无缝那就太好了。

EDIT

不是重复的，并且清楚地解释了原因。


在我看来，你可以将悬停移动到.site-submit-container根据您的代码，它未使用...然后在悬停时，您删除白色线性渐变并将其替换为彩色渐变。

::placeholder {
    color: #000000;
}

input[type=name],
input[type=company],
input[type=email],
input[type=textarea],
input[type=submit],
input[type=tel] {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 30px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
}

.site-input-container {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.site-message-container {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    margin-bottom: 10px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.site-form-holder {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 190px;
    max-height: 190px;
    padding: 15px;
    resize: none;
    display: inline-block;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border-radius: 30px;
}

.site-submit-container:hover {
background-image: linear-gradient(-45deg, #006699, #9900CC), radial-gradient(circle at top right, #006699, #9900CC); 
}
.site-submit-container:hover input {
   background: transparent;
   color: #fff;
}
<div class="site-form-holder">
  <form method="post" name="process" action="process" autocomplete="off">

    <div class="site-input-container">
      <input type="name" id="forename" name="forename" placeholder="Forename" required=""> <br>
    </div>

    <div class="site-message-container">
      <textarea name="message" id="message" placeholder="Your message." maxlength="1000" required=""></textarea>
    </div>


    <div class="site-input-container site-submit-container">
      <input type="submit" name="submit" id="submit" value="Contact Us" required="">
    </div>
  </form>
</div>

编辑：这似乎是一种不太复杂的解决方案，只需堆叠两个元素，然后将一个背景变为透明。并使用padding在包装纸上复制边框。这样你就不需要渐变边框了。

::placeholder {
    color: #000000;
}

input[type=name],
input[type=company],
input[type=email],
input[type=textarea],
input[type=submit],
input[type=tel] {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 30px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
}

.site-input-container {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.site-message-container {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    margin-bottom: 10px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.site-form-holder {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 190px;
    max-height: 190px;
    padding: 15px;
    resize: none;
    display: inline-block;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border-radius: 30px;
}
/* part I added overrides a few styles above */
.site-submit-container {
	background-image: linear-gradient(-45deg, #006699, #9900CC);
	border: none;
	padding: 5px;
}
.site-submit-container:hover input {
	 background: transparent;
	 color: #fff;
}
<div class="site-form-holder">
	<form method="post" name="process" action="process" autocomplete="off">

		<div class="site-input-container">
			<input type="name" id="forename" name="forename" placeholder="Forename" required=""> <br>
		</div>

		<div class="site-message-container">
			<textarea name="message" id="message" placeholder="Your message." maxlength="1000" required=""></textarea>
		</div>

		<div class="site-input-container site-submit-container">
			<input type="submit" name="submit" id="submit" value="Contact Us" required="">
		</div>
	</form>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

更改提交按钮行为的更合适的方法[重复] 的相关文章

  • 使用百分比 (%) 时如何计算填充？

    为什么本例中的内边距不等于 300 像素 Test width 600px padding right 50 box sizing border box background ddd div TEXT ETISI DHOASIHD I SA

  • 获取 Angular ng-option 下拉列表的选定文本

    我的角度代码中有这个下拉列表 div class btn group div

  • mailto：相当于电话的链接？ [复制]

    这个问题在这里已经有答案了 有没有办法使用 html 和 或 JS 链接图像以便拨打电话 类似于 mailto 链接 如果可能的话 这只会让生活变得更加轻松 假设如果一个人有 Skype 是否可以通过一个按钮为他们打开 Skype 并拨打电

  • HTML5中如何隐藏video标签的全屏按钮

    我需要隐藏 HTML5 中视频标签的全屏按钮 有什么办法可以实现吗 Thanks 我认为你可以通过更改 css 来实现这一点 document fragments 这些是 DOM1 规范 所有浏览器都支持 但关于样式 我不确定 Simple

  • POST 表单数据为 application/json

    我正在开发一个 API 它接收 application json post 请求 并触发一些流程 我目前的主要问题是发送一个 application json 帖子 其中包含来自输 入表单的数据 我已经尝试过 jQuery ajax 但由于

  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系？

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢

  • 将客户端生成的响应作为下载进行流式传输，无需 Service Worker

    假设我有一个在客户端生成的大文件 我希望允许用户将其保存到他们的硬盘驱动器上 通常的方法是创建一个 Blob 然后为其创建一个对象 URL const blob new Blob chunks type application exampl

  • 带有旋转文本的垂直导航

    我正在尝试实现一个包含链接的垂直导航菜单 并且我已使用 css3 将链接文本旋转到 270 度 我旋转了它 因为我希望文本从下到上 问题是当我添加顶部填充时 间距不一致 你可以看到我的代码here http jsbin com ravudu

  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571

  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s

  • ExitFullScreen 不起作用 + 无论如何要按键盘单击按钮？

    我的浏览器 Google Chrome 版本 33 0 1750 154 m Script function exitFullscreen var element document documentElement if element mo

  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va

  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的

  • iPad 2 的 HTML5 源元素错误是否已修复？

    根据这个页面 http camendesign com code video for everybody webm http camendesign com code video for everybody webm 第一个 iPad 有一

  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta

  • 在 Apache 服务器上将特定的 .htm 页面处理为 .php [重复]

    这个问题在这里已经有答案了 我正在为 Apache 服务器编程 并且只需要将一个特定的 html 页面 例如 first htm 作为 PHP 脚本进行处理 可以设置吗 SetHandler http httpd apache org do

  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE

  • 从 html 页面和 javascript 调用 java webservice

    我正在尝试从 javascript 调用 java 实现的 Web 服务 使用 NetBeans IDE 我读过很多关于 jQuery 和 AJAX 的内容 但我似乎无法掌握它 假设我的 Web 服务 WSDL 位于 http localh

  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2

  • CSS 字体在 Firefox 中不起作用

    我下面有这个字体代码 它在谷歌浏览器中工作正常 但在火狐浏览器中根本不起作用 为什么

随机推荐

  • 为什么我可以通过带有太多参数的指针调用函数？

    假设我有这个功能 int func2 printf func2 n return 0 现在我声明一个指针 int fp double 这应该指向一个函数 该函数需要double参数并返回一个int func2没有任何论点 但当我写时仍然 f

  • str.isdecimal() 和 str.isdigit() 区别示例

    阅读 python 文档我了解到 isdecimal 和 isdigit 字符串函数 但我没有发现文献对它们的可用区别太清楚 有人可以向我提供这两个函数的区别的代码示例吗 类似行为 gt gt gt str isdecimal 1 True

  • DHCP 服务器将任何 url 重定向到登陆页面

    我有一个 Linux DHCP 服务器 我需要将所有网络流量重定向到一个登陆页面 该页面将包含有关如何在网络上注册计算机的说明 无论用户输入什么 URL 都需要将用户重定向到网页 在 DHCP 服务器上 即 用户输入 google com

  • 具有模板的 C++ 类找不到其构造函数

    我有一个问题我不太明白 我有一个节点类 template

  • CSS 背景图像尺寸过渡

    我正在研究一个简单的标记 可以调整 div 背景图像的大小 看小提琴 http jsfiddle net zeYZL http jsfiddle net zeYZL 我需要使用简单的 CSS 过渡来为其设置动画 我尝试这样做 tile ho

  • 如何阻止远程表单提交？

    我有一个可以远程和正常使用的表格 form for comment html class comment form remote request xhr do f f text area body f submit 我希望仅在以下情况下提交

  • 如何将“原始”字符串转换为普通字符串？ [复制]

    这个问题在这里已经有答案了 在Python中 我有一个像这样的字符串 x89 n 如何将其解码为普通字符串 例如 x89 n 如果您的输入值为str字符串 使用codecs decode 转换 import codecs codecs de

  • 有 PayPal IPN 的示例吗

    我有一个 Asp Net WEB API 2 项目 我想实现一个即时付款通知 IPN 侦听器控制器 我找不到任何示例和 nuget 包 我所需要的只是确认用户使用 Paypal 上的标准 html 按钮付款 这很简单 所有 nuget 包都

  • 初始化列表中的依赖关系

    这种行为定义明确吗 class Foo int A B public Foo int Bar B Bar A B 123 int main Foo MyFoo 0 return 0 不 它是未定义的 A将首先初始化 它是类定义中的第一个 并

  • 博客的 mongodb 架构设计

    您将如何为具有基于文档的数据库 mongodb 的类似博客的网站设计架构 该站点具有以下对象 用户 文章 评论 用户可以向文章添加评论 每个用户还可以为每个评论投票一次 我希望能够有效地执行这些查询 1 获取文章A 文章A的评论以及每个评论

  • 从 R 中的选项卡式文本创建树形图

    我想制作以下数据的树 流程图 并用制表符正确缩进 Vertebrates fish goldfish clownfish amphibian frog toad reptiles snake lizard turtle tortoise b

  • python kivy在矩形内添加文本

    如何在矩形内添加文本 我使用下面的代码并在画布内添加了一个标签 希望它能显示在矩形内 import kivy from kivy app import App from kivy uix anchorlayout import Anchor

  • 如何编写看起来像方法的 lambda 表达式？

    我一直在疯狂地试图解决这个问题 考虑以下代码 我假设已定义前向引用 Signature representing a pointer to a method call typedef void MyClass MyMethod int cl

  • Spark超时可能是由于HDFS中文件超过100万个的binary Files()

    我正在通过以下方式读取数百万个 xml 文件 val xmls sc binaryFiles xmlDir 该操作在本地运行良好 但在纱线上失败并显示 client token N A diagnostics Application app

  • 显示错误后如何隐藏错误提供程序？

    我有一个问题 也许有人可以帮助我 你知道在这个程序中制作的错误被删除后 如果没有更多错误 图标 错误提供程序 消失 但它出现了 该怎么办 请原谅我的语法错误 bool IsValidated true will be checked on

  • 如何让 Android 设备启动并跳过屏幕锁定

    如题 我可以唤醒手机并跳过屏幕锁定吗 我想编写一个基于闹钟的应用程序 当时间到了时 即使手机处于睡眠状态 该应用程序也应该检测到后台的某些内容 当检测到某些东西时 手机应该自动唤醒 跳过屏幕锁定 并显示图片 开始新的活动 有人能给我一些关于

  • jQuery UI 对话框始终位于右上角

    我试图将对话框放置在锚标记的右侧 但没有成功 我检查了解决方案jQuery UI 对话框定位 https stackoverflow com questions 744554 jquery ui dialog positioning似乎都不

  • 如何在eclipse中生成java项目的可执行文件[重复]

    这个问题在这里已经有答案了 我正在尝试为我的 Java 应用程序创建一个可执行文件 但我不知道该怎么做 我知道如何生成可执行 jar 文件 但我想制作一个可执行应用程序 我正在使用 eclipse indigo 来制作 java 应用程序并

  • 在 PHP 中生成 SAN CSR

    我目前正在编写一个脚本 通过 Web 界面生成 CSR 以便提交以生成证书 我当前的问题是我想生成 SAN 证书 但找不到有关如何添加subjectAlternateName到生成的证书请求中 我当前的代码是 private key ope

  • 更改提交按钮行为的更合适的方法[重复]

    这个问题在这里已经有答案了 是的 我以前问过这个here https stackoverflow com questions 62268305 whitespace in wrapped form element但没有一个答案是合适的 或者

热门标签