PDA

Просмотр полной версии : Редактирование границы у элемента <input>


cfif3d
12.07.2006, 16:30
Хотелось бы создать текстовый инпут граница по каждой из сторон которого представляла бы собой 2-х слойную структуру, т.е. допустим толщина всей границы 2px и нужно чтобы часть этой границы(граница в 1px) была одного цвета, а другая часть от всей границы - другого цвета.
Такая проблема встала из-за того, что 2-х пиксельная граница со свойством border-style:inset к сожалению отображает не те цвета(в частности при border-color:#FFF отображается внешние левый и верхний слои черным, а нужно чтобы было наоборот, внутренние левый и верхний черным). Может кто сталкивался с такой проблемой?

baron27
13.07.2006, 02:36
вот такой грубоватый код, но мысль думаю понятна: делаем границу инпута по цвету такой же как и фон страницы, убираем стиль границы, фиксируем фон, задаем фоновое изображение (с любыми цветами), по размерам, совпадающее с инпутом, подгоняем паддингом.
правда косяк в том, что background-position:fixed; ие не понимает, поэтому если много написать, то фон уедет влево:)

<input type="text" style="border-color:#fff;
border-style:none;
background-position:fixed;
background-image:url(bg.jpg);
background-repeat:no-repeat;
padding-bottom:4px;
padding-right:4px;" />

All87
13.07.2006, 15:39
Если увеличится сама кнопка то нужно менять имедж:)
Есть еще такой способ:
<span style='border:1px #xxxxxx solid'>
<input type='text' style='border:1px #xxxxxx solid'>
</span>
Чтото в этом роде=)

All87
13.07.2006, 15:40
оговорился не кнопка а ткстобласть:)

baron27
13.07.2006, 16:15
ну я и говорю, что надо точно подбирать картинку:)