Как сверстать input без картинок
Вложений: 1
Подскажите, как можно сверстать подобный input type="text" не используя картинок. Как видно из картинки сложность в том, что элемент помимо однопиксельной границы (тут всё понятно, border:#999 1px solid), имеет закругленную обводку толщиной 4 пикселя. Как сделать такую обводку не используя картинок?
|
обернуть его во что-нибудь. дать инпуту border, и его wrapper тоже border, но уже с border-radius.
|
Цитата:
|
если просто <input> хотите, то никак.
|
Цитата:
можно, но только для нормальных браузеров, через градиент, background-size и множественные фоновые изображения. |
Цитата:
|
Цитата:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8"/>
<title>Тест</title>
<style>
input {
border: 4px solid #999;
border-radius: 4px;
height: 50px;
width: 300px;
background-color: #fff;
background-image: -moz-linear-gradient(#f00, #fff 1px), -moz-linear-gradient(#f00, #fff 1px), -moz-linear-gradient(0deg, #f00, #fff 1px), -moz-linear-gradient(0deg, #f00, #fff 1px);
background-image: -webkit-linear-gradient(#f00, #fff 1px), -webkit-linear-gradient(#f00, #fff 1px), -webkit-linear-gradient(0deg, #f00, #fff 1px), -webkit-linear-gradient(0deg, #f00, #fff 1px);
background-image: -o-linear-gradient(#f00, #fff 1px), -o-linear-gradient(#f00, #fff 1px), -o-linear-gradient(0deg, #f00, #fff 1px), -o-linear-gradient(0deg, #f00, #fff 1px);
background-image: -ms-linear-gradient(#f00, #fff 1px), -ms-linear-gradient(#f00, #fff 1px), -ms-linear-gradient(0deg, #f00, #fff 1px), -ms-linear-gradient(0deg, #f00, #fff 1px);
background-image: linear-gradient(#f00, #fff 1px), linear-gradient(#f00, #fff 1px), linear-gradient(0deg, #f00, #fff 1px), linear-gradient(0deg, #f00, #fff 1px);
background-size: auto 1px, auto 1px, 1px auto, 1px auto;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
</style>
</head>
<body>
<input/>
<script>
</script>
</body>
</html>
|
хм. интересное применение!
|
Цитата:
а когда это начнёт работать то вообще красота будет! |
|
Цитата:
|
У ФФ есть outline-radius))
А так box-sadow вовнуть и border с border-radius вовне. FF: <input type="text" value="a b c d e f">
<style>
input{
-moz-outline-radius: 5px;
outline: 5px solid #ddd;
border:1px solid #aaa;
padding:4px;
}
</style>
Остальные: <input type="text" value="a b c d e f">
<style>
input{
-moz-box-shadow: inset 0 0 0 1px #aaa;
-webkit-box-shadow: inset 0 0 0 1px #aaa;
-o-box-shadow: inset 0 0 0 1px #aaa;
box-shadow: inset 0 0 0 1px #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border:5px solid #ddd;
padding:5px;
}
</style>
Ну и для ослика - что-ить своё.) |
Aetae,
Ваш второй вариант вполне подходит, спасибо! |
Еще есть свойство outline
|
Цитата:
greatilya, кстати, такие советы лучше задавать на форуме сайта http://htmlbook.ru . Больше шансов, что там помогут. |
greatilya, есть ещё вариант. Глянь тут.
|
Цитата:
|
Цитата:
|
Цитата:
Надежда о том, что IE будет браузером с хорошим отношением к верстальщикам умерла во мне месяца три назад окончательно. Цитата:
В силу реализации в последнее время кучи анимации, фич и примочек в виде дизайнерского изврата я понял, что без написания кода под последние браузеры и отдельно под ie7 и ie8 и ie9 не обойтись. Весь этот graceful degradation существует благодаря ie. Остальные браузеры давно обновились и по моей статистике поддерживают всё что нужно из последних наворотов. Старые версии их быстро уходят и в degradation нет смысла. Чтобы не разводить холивар опять на прописных истинах, я пожалуй на этом и закончу. |
Цитата:
|
outline + border
<html>
<head>
<style>
input{
outline:1px solid #111;
border:4px solid #999;
border-radius:5px;
}
</style>
</head>
<body>
<input type="text"/>
</body>
</html>
Почти получилось... |
qwertyuiop10, щито?
В теме уже преведены нормальные работчие варианты. То что у вас получится х*ня, можно сказать и не запуская. |
qwertyuiop10, сравните рисунок (условие) и то, что у вас получилось (результат)
|
box-shadow + border-radius + css3-pie (для IE).
градиенты лепить не советую. |
melky,
Я же говорю, почти ) |
Цитата:
|
Тема закрыта, потому что исчерпывающий ответ уже дан.
|
| Часовой пояс GMT +3, время: 03:03. |