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值似乎有些解释，因为给定的颜色是黑色的，结果是灰色的，但它根本不是透明的。

在测试了：火狐8.0，Chrome浏览器16.0.912.63

因为它发生在两个Webkit的&壁虎，也许有些事情我做错了......我试图删除位置：在容器上绝对的，以删除背景图片（这是一个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 */ 
} 

Updated JS Fiddle。

Answer 2

您可以添加：

input { 
    background-clip: padding-box; 
    border: 2px solid rgba(0,0,0,0.14); 
} 

工作RGBA输入。

https://css-tricks.com/transparent-borders-with-background-clip/