从 CSS 按钮中删除轮廓答案

【问题标题】：Removing outline from CSS button从 CSS 按钮中删除轮廓
【发布时间】：2020-10-10 07:08:59
【问题描述】：

目前我在下拉菜单中的按钮在每个按钮周围显示黑色轮廓（如图所示），但我正在尝试删除它们，以便按钮看起来与背景更加融合（或者将轮廓设为白色) 这样你就看不到它了。这是我当前的 html 代码

   <input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Social</input>
   <input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Professional</input>

这是我的 profiletype 的 CSS 代码

  .profiletype {
  background-color: white;
  font-weight: 300;
  letter-spacing: 1px;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  margin: 5px;
  text-align: center;
}

我附上了一张它目前的样子的图片。谢谢！：

current image

【问题讨论】：

className = 'profiletype' 应该只是class="profiletype" 但这可能无法摆脱可能是所有input 上设置的样式的边框。您可能需要将border: none; 添加到您的.profiletype
我认为您的答案可以在这里找到 - 如果这不起作用，我们可以为您查看其他选项 - stackoverflow.com/questions/11497094/remove-border-from-buttons
@ChrisL 我最初将它作为类，但在我的控制台日志中，我得到一个“无效的 DOM 正确的‘类’。你的意思是‘类名’吗？”错误，所以我将其更改为 className 并且警告消失了。
你在class 和= 之间有空格吗？ className 是 javascript 引用类的方式，而不是 html 声明类的方式。此外，请与您的报价保持一致。虽然在 html 中使用单引号或双引号并不重要，但您应该在整个代码中保持一致。大多数人更喜欢 html 中的双引号。
这能回答你的问题吗？ Remove border from buttons

标签： html css button stylesheet

【解决方案1】：

关于该大纲 - 这是浏览器应用的 input type="button" 的默认样式。要修复它，您可以声明自己的边框样式。例如：border:1px solid blue;

.profiletype {
  background-color: white;
  font-weight: 300;
  letter-spacing: 1px;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  margin: 5px;
  text-align: center;
  border:1px solid blue;
}

<input type="button" class = 'profiletype' name="profile_type" value='Professional' />
 <input type="button" class = 'profiletype' name="profile_type" value='Social' />

【讨论】：