如何使用CSS删除按钮中的链接下划线[重复]答案

【问题标题】：How to remove link underline in a Button using CSS [duplicate]如何使用CSS删除按钮中的链接下划线[重复]
【发布时间】：2018-05-24 12:13:35
【问题描述】：

我熟悉在divs 和spans 中使用text-decoration: none。但是，它似乎不适用于按钮。我有以下 HTML：

<a href="upgrade.php">
    <input type="button" class="Buttons" id="Upgrade" value="Upgrade">
</a>

和 CSS：

.Buttons {
    background-color:#D93F87;
    height:50px;
    width:100px;
    border-radius:10px;
    font-size:32px;
    color:#FFFFFF;
    text-align:center;
    text-shadow: -2px 0 #CCC, 0 1px #CCC, 1px 0 black, 0 -1px black;
    padding-bottom:4px;
    margin:10px;
}
#Upgrade {
    width:150px;    
}
#Upgrade a {
    text-decoration:none;
}

但我仍然得到一个下划线。我尝试过使用 span 的变体，但这也无济于事。我在上面做错了吗？

【问题讨论】：

您的 HTML 无效。禁止在链接中放置<input>。如果您希望链接看起来像一个按钮，请使用 CSS。
这是否记录在某处？我可能最终会在 js 中使用按钮的单击事件，因为我不想更改所有按钮（我确信将链接样式化为按钮会使它们看起来与该类的其他按钮不同）。跨度>
w3.org/TR/html5/textlevel-semantics.html#the-a-element — 内容模型：透明，但不得有交互式内容或元素后代。
“我确信将链接样式化为按钮会使它们看起来与该类的其他按钮不同”——如果你做得对，就不会。
换种说法，我无法设置相同的按钮和链接样式。 :-) 顺便说一句，如 w3.org 链接中所述，不允许的 ARIA 角色属性值：链接（默认 - 不设置）、按钮、复选框、单选、开关、选项卡或树项表示允许按钮等？

标签： css button text-decorations

【解决方案1】：

只需添加

a.mainButton, a.mainButton:hover {
  text-decoration: none;
}

您可以使用.mainButton 或任何其他类来标记a 并给它css

您已使用#Upgrade 设置text-decoration，但它不能作为input ID 使用

您不能通过定位子元素来编写父级的css。您在css 中使用了a 标签作为#Upgrade 的子标签，但恰恰相反

【讨论】：

我不想对所有实例都这样做，只在按钮等特定实例中...
查看更新的答案@Chiwda
如果您不想在所有情况下都这样做，您可以使用内联样式链接<a href="upgrade.php" style="text-decoration:none"><input type="button" class="Buttons" id="Upgrade" value="Upgrade"></a>

【解决方案2】：

#Upgrade a

表示您在#Upgrade 中选择a。在你的情况下，它正好相反，#Upgarde 在a 中。

所以你可以写

a #Upgrade {...}

或者更简单

#Upgrade {...}

【讨论】：

两个都试过了，都不行！

【解决方案3】：

您可能缺少锚定目标，您可以尝试使用这样的类

  .Buttons {
    background-color:#D93F87;
    height:50px;
    width:100px;
    border-radius:10px;
    font-size:32px;
    color:#FFFFFF;
    text-align:center;
    text-shadow: -2px 0 #CCC, 0 1px #CCC, 1px 0 black, 0 -1px black;
    padding-bottom:4px;
    margin:10px;

   }
   #Upgrade {
        width:150px;
    }
   .test {
      text-decoration: none;

    }

<a class="test" href="upgrade.php">
<input type="button" class="Buttons" id="Upgrade" value="Upgrade">
<span>This text is not underline</span>
</a>

【讨论】：