RGBa border color & <input> element

Question

I ran into an issue while working on a webdesign, trying to apply a semi-transparent (RGBa) border color to elements doesn't seem to work properly. You get a non-transparent border instead. Here's a CSS sample:

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);
}

Expected behavior: a gray, transparent border. I tried it on another element on the same page and it works perfectly.

Actual behavior: A gray border. That is all. RGBa values seem to be somewhat interpreted as the color given is black and the result is gray, it just ain't transparent at all though.

Tested on: Firefox 8.0, Chrome 16.0.912.63

Since it happens on both Webkit & Gecko, maybe there's something I'm doing wrong... I tried to remove position: absolute on the container, to remove the background image (which is a PNG with transparency)... nothing changed.

Answer 1

The problem appears to be that an input element is a replaced element (in that it's supplied/rendered by the underlying OS, not the browser itself; though I don't know the OS can't handle the rgba() color properly).

It's not an ideal solution, but wrapping the input elements in another element, and styling the borders of the wrapping element works:

<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>

With the 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

You can add:

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

for work rgba in input.

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