Question

所以我做了一些用于发送消息的输入块，它在Chrome和Safari中工作正常，但Firefox用灰色边框显示它。 IE中也存在一个问题，因为它会显示它们更大，直到你激活它，然后它会恢复到正常大小。

<form action="" method="post">
<label for="name">
<input class="input1" type="text" placeholder="Your name" name="name" id="name"/>
</label>
<label for="E-mail">
<input class="input1" type="text" placeholder="Your e-mail" id="email"/>
</label>
<label for="Subject">
<input class="input1" type="text" placeholder="Subject" id="subject" />
</label>
<label for="Message">
<textarea class="input2" name="message" rows="20" cols="20" id="message" placeholder="Message"></textarea>
</label>
<label>
</form>

CSS：

input {
    -moz-border-color: #0d1025;
    -moz-border-width:medium;
    border-color: #0d1025;
    border-width:medium;
    margin-top: 15px;
}
.input1 {
    width:300px;
    height:30px;
    display:block;
}
.input2 {
    width:650px;
    height:270px;
    margin-left:320px;
    margin-top:-143px;
    border-color: #0d1025;
    border-width:medium;
}

::-webkit-input-placeholder {
   color: #0d1025;
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}

:-moz-placeholder { /* Firefox 18- */
   color: #0d1025;  
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #0d1025;  
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}

:-ms-input-placeholder {  
   color: #0d1025;  
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}
textarea:focus, input:focus{
    outline: 0;
}

http://jsfiddle.net/h2core/taQfF/2/

我做错了什么？

Answer 1

您需要定义border-style: solid;，因为不同的浏览器具有不同的默认值。

demo

Firefox中的输入不同

1 个答案: