Цвет рамки RGBa & <input>элемент - PullRequest
Новая
       5

Цвет рамки RGBa & <input>элемент

1 голос
/ 20 декабря 2011

Я столкнулся с проблемой при работе над веб-дизайном, пытаясь применить полупрозрачный (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, возможно, я что-то не так делаю ... Я попытался удалить position: absolute в контейнере, чтобы удалить фоновое изображение (которое представляет собой PNG с прозрачностью) ... Ничего не изменилось.

Ответы [ 2 ]

5 голосов
/ 20 декабря 2011

Проблема, как представляется, заключается в том, что элемент 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 .

0 голосов
/ 02 декабря 2015

Вы можете добавить: 

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

для работы rgba на входе.

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

...