RGBa边框颜色和<input>元素

Question

我在处理网页设计时遇到了一个问题,尝试将半透明(RGBa)边框颜色应用于元素似乎无法正常工作.你得到一个不透明的边框.这是一个CSS示例:

header > div form {
    width: 229px;
    background: url('img/connexion.png') no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
}

header > div form > p:first-child {
    color: #1B2E83;
    font-size: 16px;
    font-weight: bold;
    margin-top: 31px;
}

header > div form input[type=email], header > div form input[type=text], header > div form input[type=password] {
    width: 140px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.14);
}

预期行为:灰色透明边框.我在同一页面上的另一个元素上尝试了它,它完美无缺.

实际行为:灰色边框.就这些.RGBa值似乎在某种程度上被解释为给定的颜色是黑色,结果是灰色的,但它根本不是透明的.

测试:Firefox 8.0,Chrome 16.0.912.63

因为它发生在Webkit和Gecko上,也许有些事我做错了...我试图删除位置:绝对容器,删除背景图像(这是一个透明的PNG)......没有改变.

Answer 1

问题似乎是input元素是一个被替换的元素(因为它由底层操作系统提供/呈现,而不是浏览器本身;虽然我不知道操作系统无法rgba()正确处理颜色).

它不是一个理想的解决方案,但将input元素包装在另一个元素中,并为包装元素的边框设置样式:

<form method="post">
    <p>Espace connexion</p>
    <div>
    <input type="email" name="mail" placeholder="Votre adresse e-mail" required="required" value="" />
    </div>
    <div>
    <input type="password" name="password" placeholder="Votre mot de passe" required="required" pattern=".{4,}" title="4 caractères minimum" />
    </div>
    <input type="submit" value="OK" />
</form>

使用CSS:

form div, div#test {
    width: 140px;
    height: 20px;
    border: 20px solid rgba(255,0,0,0.5);
}

form div input {
    width: 100%; /* to stop the inputs being wider than the containg div */
    box-sizing: border-box; /* to include the border as part of the width */
}

更新了JS Fiddle.