Question

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

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

我尝试了所有可能的解决方案，包括大纲和内容，但似乎并不能解决问题。有什么建议吗？灰色边框看起来很偏斜。

Answer 1

使用边框：0px

input[type=button] 
{
  border:0px;
}

/* Or */


input[type=button] 
{
  border:none;
}

Answer 2

添加边框：0

input[type=button] {
    border:0
}

Answer 3

将以下属性添加到CSS

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

绝对好用，当您不想应用特定属性而不是使用0或0px时，最好使用无或取消设置 ;

Answer 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;
}

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

4 个答案: