更改提交按钮行为的更合适的方法 [英] A more suitable way to change submit button behaviour

问题描述

是的，我在此处之前已经问过这个问题，但是没有一个合适的答案或者他们破坏了网站中的其他内容，因此我选择再次发布，以希望有一种更简单的方法，并且这个问题变得更容易理解.

Yes, I have asked this before here but none of the answers were suitable or they broke other things within the site so I've opted to post it again in the hopes that there's a more simple approach possible and that this question becomes easier to understand.

我有这种形式:

::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易于其他人理解.我还必须包含所有输入，以便浏览器内的自动完成功能不会删除背景图像边框.

Things to note are that yes I know name isn't an input type but I've defined it so that the html is easier for others to understand. I've also had to contain all of the inputs so that autocomplete within browsers doesn't remove the background image border.

我的问题在于提交按钮，因为那里有轮廓.这次，我包括了更完整的代码，希望它能坚持使用十六进制颜色，并使问题更易于解决.

My issue lies with the submit button because there's an outline. I've included more complete code this time in the hopes that it can stick with HEX for colours and make the issue easier to solve.

问题在于，当按钮悬停在上方时，会出现如下空白:

The problem is that when the button is hovered over there's white space like this:

这:

我在这里发布了此问题，其中提供了更完整的表单视图以及更多的代码，希望可以找到比原始方法更好的方法，因为它们都无法统一.

I've posted this question here with a more complete view of the form as well as more code in the hopes that a better approach can be reached than the original as none of them managed to fit together.

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

Any approaches would be useful to make the button fill completely without any white outlines. I can't remove borders as the button can temporarily change size looking like a glitch.

EDIT answer 中的方法>布莱斯·霍伊森(Bryce Howitson)距离很近，但是当您仔细观察时(在移动设备上会更加普遍)，您会发现渐变并不完全匹配.这是在台式机上的短暂悬停，但在移动设备上的使用时间会更长.

EDIT The approach in the answer from Bryce Howitson is close but the when you look closely (it'll be more prevalent on mobile) you can see that the gradients don't perfectly match. It's a momentary hover on a desktop but would last longer on mobile.

如果有一种方法可以使外观看起来无缝，那就太好了.

If there's a way to make this look seamless that would be great.

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

Not a duplicate and it was clearly explained why.

推荐答案

在我看来，您可以将鼠标悬停在.site-submit-container上，根据您的代码，该鼠标未使用...然后在悬停时，将白色移开线性渐变并将其替换为彩色渐变.

It seems to me you can just move the hover to the .site-submit-container which according to your code is unused... Then on hover, you remove the white linear gradient and replace it with the colored gradient.

::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复制边框.这样，您就不必具有渐变边框.

It seems like a less complex solution to simply stack two elements and then turn one background transparent. And use padding on the wrapper to replicate the border. This way you don't need to have gradient borders.

::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>

这篇关于更改提交按钮行为的更合适的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！