从输入类型按钮值中删除灰色边框答案

【问题标题】：Remove grey border from input type button value从输入类型按钮值中删除灰色边框
【发布时间】：2019-02-23 11:06:28
【问题描述】：

看看https://codepen.io/lukas-will-per/pen/BOvjEQ

input[type=button] 
{
font-weight: bold;
color: #000000;
background-color: Transparent;
text-align: center;
}

我用大纲和东西尝试了所有可能的解决方案，但这似乎没有奏效。有什么建议吗？那个灰色的边框看起来太棒了。

【问题讨论】：

input[type=button] { border: none; } 似乎工作正常。

标签： html css button input

【解决方案1】：

使用边框：0px

input[type=button] 
{
  border:0px;
}

/* Or */


input[type=button] 
{
  border:none;
}

【讨论】：

首先您添加了border:0px;，然后通过添加border:none; 进行了编辑。为什么两者都需要？
嗨，兄弟，再次检查

【解决方案2】：

添加边框：0

input[type=button] {
    border:0
}

【讨论】：

【解决方案3】：

将以下属性添加到您的 CSS 中

input[type=button]
{
border:none;
}

工作得很好，当您不希望应用特定属性而不是使用 0 或 0px 时，使用 none 或 unset 始终是一个好习惯;

【讨论】：

【解决方案4】：

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

.car {
  margin: 20px auto;
  max-width: 500px;
}

.caption {
  height: 250px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-bottom: 5px solid #d8d8d8;
}

.caption:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 500px;
  width: 100%;
  border-radius: 50%;
  border-right: 5px solid #d8d8d8;
  border-left: 5px solid #d8d8d8;
}

.caption h1 {
  width: 60%;
  margin: 100px auto 35px auto;
}

.fuselage {
  border-right: 5px solid #d8d8d8;
  border-left: 5px solid #d8d8d8;
  border-bottom: 5px solid #d8d8d8;
}

ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

input[type=button] {
  font-weight: bold;
  color: #000000;
  background-color: Transparent;
  text-align: center;
}

input[type=button]:checked {
  background: #bada55;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}

input[type=button]:disabled {
  background: #dddddd;
  text-indent: -9999px;
  overflow: hidden;
}

input[type=button]:disabled :after {
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}

input[type=button]:disabled+label:hover {
  box-shadow: none;
  cursor: not-allowed;
}

.seat,
.seatlow {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #F42536;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}

.seat:before,
.seatlow:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.seat:hover,
.seatlow:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}

.seatlow:nth-child(1) {
  margin-right: 12.5%;
}

.seatlow:nth-child(2) {
  margin-right: 12.5%;
}

.seat:nth-child(1) {
  margin-right: 70%;
}

input[type="button"] {
  border: none;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>Autoreservierung</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="includes/style.css">
  <script type="text/javascript">
  </script>
</head>

<body>
  <div class="car">
    <div class="caption">
      <h1>Please select a seat</h1>
    </div>
    <ol class="cabin fuselage">
      <li class="row 1">
        <ol class="seats">
          <li class="seat">
            <input type="button" id="1A" value="Fahrer" />
          </li>
          <li class="seat">
            <input type="button" id="1B" value="Beifahrer" />
          </li>
        </ol>
      </li>
      <br/><br/>
      <li class="row 2">
        <ol class="seats">
          <li class="seatlow">
            <input type="button" id="2A" value="Rücksitz Fenster" />
          </li>
          <li class="seatlow">
            <input type="button" id="2B" value="Rücksitz Mitte" />
          </li>
          <li class="seatlow">
            <input type="button" id="2C" value="Rücksitz Fenster" />
          </li>
        </ol>
      </li>
    </ol>
  </div>
  <script src="includes/index.js"></script>
</body>

</html>

您需要添加border: none

input[type="button"] {
  border: none;
}

【讨论】：