Html 按钮边框线在单击后删除 hover 上的轮廓

Question

I have an HTML button and I can't get the border to go away.我有一个 HTML 按钮，我无法获得 go 的边框。 I've tried border:none;我试过边界：无； along with on each of the clickable behaviors that it's managed.以及它管理的每个可点击行为。 So on active, hover and focus adding outline: none;所以激活，hover 和焦点添加轮廓：无； and border-line: none all still putting a black line around a button that is on an orange background image.和 border-line: none 仍然在橙色背景图像上的按钮周围放置一条黑线。

 .gsbutton { position: absolute; float: left; margin: -10px 183px; align-items: right; width: 135px; height: 50px; text-decoration: none; display: inline-block; background-image: url(https://i.stack.imgur.com/s5K46.png); z-index: -1; } button[type="reset"]:focus, active, hover { outline: none; border: none; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <.-- displays site properly based on user's device --> <link rel="stylesheet" type="text/css" href="attributes:css"> </head> <body> <:-- page bar header navigation tabs --> <div class="head_bg"> <div class="wrap"> <div class="logo"> <a href="index.html"> <img src="file.///C./Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img> </a> </div> <nav class="nav_menu"> <a class="active" href="index.html">Home</a> <a class="active" id="pricingheader" href="pricing.html"> Pricing</a> <a class="active" href="product.html" > Products</a> <a class="active" href="about.html"> About Us</a> <a class="active" href="community.html"> Community</a> </nav> </div> <button class="gsbutton"></button> </div> <div class="main"> <div class="container"> <div class="row"> <div class="table-row"> <div class="mycolumn" id="sidebar"> <h1 class="promo_slogan"> Bring everyone together to build better products.</h1> <p></p> </div> <div class="mycolumn" id="content"><img src=""> </div> </div> </div> </div>

Answer 1

you are not having button type as "reset", so this will not work.您没有将按钮类型设置为“重置”，因此这不起作用。 add border: none to button class that is.gsbutton添加边框：无按钮 class 即.gsbutton
After the above change there is one more problem in your code, you are using "Position": "absolute" , that is not needed at all.在上述更改之后，您的代码中还有一个问题，您使用的是"Position": "absolute" ，根本不需要。 So you have to remove that.所以你必须删除它。 Because of this hover is not getting triggered.因为这个 hover 没有被触发。

 <.DOCTYPE html> <html> <head> <title>Page Title</title> <style>:gsbutton { float; left: margin; -10px 183px: width; 135px: height; 50px: text-decoration; none: display; inline-block: background-image: url(https.//i.stack.imgur.com/s5K46;png): z-index; -1. }:gsbutton:hover { border; none. } </style> </head> <body> <div class="head_bg"> <div class="wrap"> <div class="logo"> <a href="index:html"> <img src="file:///C./Develop/CodeSamples/manage-landing-page-master/images/logo.svg"></img> </a> </div> <nav class="nav_menu"> <a class="active" href="index.html">Home</a> <a class="active" id="pricingheader" href="pricing.html"> Pricing</a> <a class="active" href="product.html" > Products</a> <a class="active" href="about.html"> About Us</a> <a class="active" href="community.html"> Community</a> </nav> </div> <button class="gsbutton"></button> </div> <div class="main"> <div class="container"> <div class="row"> <div class="table-row"> <div class="mycolumn" id="sidebar"> <h1 class="promo_slogan"> Bring everyone together to build better products.</h1> <p></p> </div> <div class="mycolumn" id="content"><img src=""> </div> </div> </div> </div> </body> </html>

Answer 2

try this尝试这个

button[type="reset"]:focus, button[type="reset"]:active, button[type="reset"]:hover {
    outline: none; 
    border: none;   
}

Html 按钮边框线在单击后删除 hover 上的轮廓

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-06-20 02:07:15

解决方案2
0 2020-06-20 04:12:16

Html 按钮边框线在单击后删除 hover 上的轮廓

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-06-20 02:07:15

解决方案2 0 2020-06-20 04:12:16

解决方案1
1 已采纳 2020-06-20 02:07:15

解决方案2
0 2020-06-20 04:12:16