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/