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＆amp;壁虎，也许有一些我做错了...我试图删除位置：绝对容器，删除背景图像（这是一个透明的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/

RGBa边框颜色＆amp; <input />元素

2 个答案: