Как сделать такое?

enjoy_inc · January 5, 2011

как сделать двойную рамку для <input>?

Как сделать 2 рамки разных цветов для input? Например цвет внутри input серый, затем рамка 1px чёрная, и ещё одна рамка, поверх, 1px красная? Нужно чтобы работало во всех браузерах. И без отступов между рамками, то есть чтобы одна накладывалась на другую вплотную.

Coder_D · January 5, 2011

Это существует в вашем воображении или есть возможность где-то узреть пример?

ShumNo · January 5, 2011

как сделать двойную рамку для <input>?
Как сделать 2 рамки разных цветов для input? Например цвет внутри input серый, затем рамка 1px чёрная, и ещё одна рамка, поверх, 1px красная? Нужно чтобы работало во всех браузерах. И без отступов между рамками, то есть чтобы одна накладывалась на другую вплотную.

Можно попробовать эти самые рамки и сделать и к ним бордер нужных цветов. Надо 10 рамок делаем 10-ть. Высоту и ширину подгоняем для каждого элемента если что.

<div style="border:1px #FFCC33 solid; width:204px;">
	<div style="border:1px #3FA0FA solid; width:202px;">
		<input style="border:1px #FFCC33 solid; width:200px;" type="text">
	</div>
</div>

Rekash · January 5, 2011

Подскажите в каком направлении двигаться (как это называется)

http://www.brama.ua/ru/swl.html?0600;534#captionContainer

А именно:

На указанном сайте для каждой двери отдельная страничка, или "откудато" подставляются данные о выбранном товаре в шаблон?

Tmin10 · January 5, 2011

Двигатся нужно в сторону Java script.

Если нужно, чтобы товар менялся с перезагрузкой страницы, то можно использовать серверные языки программирования (PHP и другие).

Также можно использовать связку AJAX+PHP или другой серверный язык.

enjoy_inc · January 5, 2011

Пишу такой код:

	<div style="border:1px #fff solid; width:47px; height: 27px">
		<input type="text" style="border:1px #ccc solid; width:45px; height: 25px; background-image: url(input_bg.png)">
	</div>

Но это не отображается корректно, я уж не говорю во всех браузерах. Чего не хватает? в чём ошибка? Уже уйму времени потратил на такую мелочь. Подскажите пожалуйста.

Должно получиться так: http://lateka.com/imgs/example.png

Фон для инпута хранится тут: http://lateka.com/imgs/input_bg.png

Edited January 5, 2011 by enjoy_inc

enjoy_inc · January 6, 2011

ну же, неужели никто не знает ка сделать такую маленькую хитрость? Профессионалы, вы где?

Vlad · January 6, 2011

Что с доктайпом?

enjoy_inc · January 6, 2011

Что с доктайпом?

чего?

Vlad · January 6, 2011

<!DOCTYPE> есть в коде, если да, то какой, полный вид.

enjoy_inc · January 6, 2011

<!DOCTYPE> есть в коде, если да, то какой, полный вид.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Vlad · January 7, 2011

У input по умолчанию небольшие поля есть, поэтому для Div надо ставить высоту 29 пикселов, а не 27. Либо явно задать padding свой, что лучше.

Sezy · January 7, 2011

<div style="border:1px #fff solid; width:47px; height: 27px">
<input type="text" style="border:1px #ccc solid; width:45px; height: 25px; background-image: url(input_bg.png)">
</div>

должно отображаться так как вы описывали. можно увидеть результат?

Sign In

Как сделать такое?

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information