Question

我在使用文本输入框在Chrome上正常运行时遇到问题。它可以在Firefox中运行;然而，在Chrome中它完全没有反应。它不显示悬停效果，甚至不允许您键入框。我的第一个想法是我错过了一个webkit，但我不确定是哪一个。（我对CSS / html很新）。请参阅我在下面使用的代码：

正如您所看到的，如果您运行代码段，它就会正常工作。

＆＃13;

input[type="text"] {
  display: block;
  margin: 0;
  width: 60%;
  font-family: arial;
  font-size: 12px;
  color: #e2e2e2;
  appearance: none;
  box-shadow: none;
  border-radius: none;
}

input[type="text"]:focus {
  outline: none;
}

.promocode input[type="text"] {
  padding: 10px;
  margin-left: 1px;
  border: solid 0px #2c303b;
  background-color: rgba(74, 80, 99, .5);
  transition: box-shadow 0.3s, border 0.3s;
  transition: background-color 0.3s ease-in-out;
  -webkit-transition: box-shadow 0.3s, border 0.3s;
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: box-shadow 0.3s, border 0.3s;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: box-shadow 0.3s, border 0.3s;
  -o-transition: background-color 0.3s ease-in-out;
}

.promocode:hover input[type="text"] {
  background-color: rgba(74, 80, 99, .8);
}

.promocode input[type="text"]:focus,
.promocode input[type="text"].focus {
  border: solid 0px #2c303b;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, .25);
}

＆＃13;

<div id="promoMsgPane" class="alignLeft" style="font-size: 12px; text-align:left; padding-top: 2em;                   margin-left: 0px;">
  <p style="margin-bottom: 15px;">Enter your promo code below</p>
</div>


<div id="PromoIDPane">
  <div class="input-list promocode clearfix">
    <input id="txtPromoID" placeholder="Enter code" type="text" />
  </div>
</div>

＆＃13;

输入文字框在Chrome上没有响应[CSS / HTML]

0 个答案: