為什么這個影片在input[type=submit]上不起作用？-有解無憂

我試圖了解如何以input與按鈕樣式的錨標記相同的方式為按鈕設定影片。在下面的示例中，我對錨點進行了樣式設定和影片處理，但輸入按鈕不會設定影片。

我想我需要定位 value 屬性，但我不確定如何定位。

如何以與設定錨標記樣式相同的方式設定輸入標記樣式？

/* Roboto Font */
@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");
/*resets*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: "Duru Sans", sans-serif;
  font-size: 16px;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
}

a, input[type=submit] {
  text-decoration: none;
}
a.nextiva-bttn-anim, input[type=submit].nextiva-bttn-anim {
  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
  font-weight: 700;
  font-size: 20px;
  padding: 20px 0;
  border-radius: 4px;
  text-align: center;
  min-width: 230px;
  cursor: pointer;
  display: inline-block;
}
a.nextiva-blue-bttn, input[type=submit].nextiva-blue-bttn {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  border: 0;
  border-radius: 4px;
  background-color: #005fec;
  font-weight: 700;
  padding: 13px 0;
  text-transform: none;
  color: #fff;
  outline: 0;
  transition: all 0.2s ease;
}
a.nextiva-bttn-anim .bttn-txt, input[type=submit].nextiva-bttn-anim .bttn-txt {
  color: inherit;
  font-weight: inherit;
  display: inline-block;
  transform: translateX(10px);
  transition: transform 0.15s;
}
a.nextiva-bttn-anim .learn-more-arrow, input[type=submit].nextiva-bttn-anim .learn-more-arrow {
  height: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
a.nextiva-bttn-anim:hover .bttn-txt, input[type=submit].nextiva-bttn-anim:hover .bttn-txt {
  transform: translate(0px);
  transition: transform 0.15s;
}
a.nextiva-bttn-anim:hover .learn-more-arrow, input[type=submit].nextiva-bttn-anim:hover .learn-more-arrow {
  opacity: 1;
  transition: opacity 0.15s, transform 0.15s;
}

<div class="container">
  <input type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Tag">
    
  <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"> 
  <a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Type">
    <span class="bttn-txt">Anchor Tag</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"> 
  </a>
</div>

uj5u.com熱心網友回復：

您可能希望將其保留為輸入元素，例如作為表單的提交部分。

您可以這樣做，并獲得相同的外觀，但是因為輸入元素不能以與錨元素相同的方式包含內容，所以我們必須添加另一個元素。

對輸入元素執行此操作的一種相當標準的方法是將其包裝在標簽元素中。此代碼段將輸入、跨度和 img 包裝在標簽中。標簽具有藍色背景等，輸入在那里，但不透明度為 0。當用戶點擊它時，它仍然會提交。（您是否仍想將值從 Submit 更改為 Input 標簽？此代碼段洗掉了 value=... 但如果這是您提交時需要的內容，您當然可以恢復它）。

/* Roboto Font */

@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");

/*resets*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: "Duru Sans", sans-serif;
  font-size: 16px;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
}

a,
input[type=submit] {
  text-decoration: none;
}

a.nextiva-bttn-anim,
.input {
  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
  font-weight: 700;
  font-size: 20px;
  padding: 20px 0;
  border-radius: 4px;
  text-align: center;
  min-width: 230px;
  cursor: pointer;
  display: inline-block;
}

a.nextiva-blue-bttn,
.input {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  border: 0;
  border-radius: 4px;
  background-color: #005fec;
  font-weight: 700;
  padding: 13px 0;
  text-transform: none;
  color: #fff;
  outline: 0;
  transition: all 0.2s ease;
}

div.input {
  position: relative;
}

input[type=submit].nextiva-blue-bttn {
  color: transparent;
  position: absolute;
  opacity: 0;
}

label {
  color: white;
}

a.nextiva-bttn-anim .bttn-txt,
.input .bttn-txt {
  color: inherit;
  font-weight: inherit;
  display: inline-block;
  transform: translateX(10px);
  transition: transform 0.15s;
}

a.nextiva-bttn-anim .learn-more-arrow,
.input .learn-more-arrow {
  height: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

a.nextiva-bttn-anim:hover .bttn-txt,
.input:hover .bttn-txt {
  transform: translate(0px);
  transition: transform 0.15s;
}

a.nextiva-bttn-anim:hover .learn-more-arrow,
.input:hover .learn-more-arrow {
  opacity: 1;
  transition: opacity 0.15s, transform 0.15s;
}

<div class="container">
  <label class="input">
      <input id="input" type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Tag">
        <span class="bttn-txt">Input Tag</span>
      <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"> 
      </label>
  <a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Type">
    <span class="bttn-txt">Anchor Tag</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
  </a>
</div>

uj5u.com熱心網友回復：

您的某些選擇器（例如input[type=submit].nextiva-bttn-anim .bttn-txt）將不起作用，因為input元素是自閉合的并且不能有子元素。見規格，哪里是說的內容模型的input元素是什么，這意味著它不能包含任何文本節點或元素節點。

如果您想要一個可以有子元素并且也可以用于提交表單的<button type="submit">元素，我建議您改用元素。它應該以與<input type="submit" />元素相同的方式運行，但您可以為其提供與<a>元素相同的內容并對其應用相同的樣式。

uj5u.com熱心網友回復：

只需使用 a<button type="submit">而不是<input type="submit" />：

/* Roboto Font */

@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");

/*resets*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: "Duru Sans", sans-serif;
  font-size: 16px;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
}

a,
button[type=submit] {
  text-decoration: none;
  font-family: "Duru Sans", sans-serif;
}

a.nextiva-bttn-anim,
button[type=submit].nextiva-bttn-anim {
  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
  font-weight: 700;
  font-size: 20px;
  padding: 20px 0;
  border-radius: 4px;
  text-align: center;
  min-width: 230px;
  cursor: pointer;
  display: inline-block;
}

a.nextiva-blue-bttn,
button[type=submit].nextiva-blue-bttn {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  border: 0;
  border-radius: 4px;
  background-color: #005fec;
  font-weight: 700;
  padding: 13px 0;
  text-transform: none;
  color: #fff;
  outline: 0;
  transition: all 0.2s ease;
}

a.nextiva-bttn-anim .bttn-txt,
button[type=submit].nextiva-bttn-anim .bttn-txt {
  color: inherit;
  font-weight: inherit;
  display: inline-block;
  transform: translateX(10px);
  transition: transform 0.15s;
}

a.nextiva-bttn-anim .learn-more-arrow,
button[type=submit].nextiva-bttn-anim .learn-more-arrow {
  height: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

a.nextiva-bttn-anim:hover .bttn-txt,
button[type=submit].nextiva-bttn-anim:hover .bttn-txt {
  transform: translate(0px);
  transition: transform 0.15s;
}

a.nextiva-bttn-anim:hover .learn-more-arrow,
button[type=submit].nextiva-bttn-anim:hover .learn-more-arrow {
  opacity: 1;
  transition: opacity 0.15s, transform 0.15s;
}

<div class="container">
  <button type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light"><span class="bttn-txt">Anchor Tag</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"></button>

  <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
  <a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Type">
    <span class="bttn-txt">Anchor Tag</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
  </a>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360145.html

標籤：html css

上一篇：如何在不調整到瀏覽器寬度的情況下將任意大小的影像居中？（裁剪視窗外的寬影像）

下一篇：編譯錯誤錯誤：沒有名為breakpoint-down的mixin