19.04.2009, 03:34
|
|
Постоянный
Регистрация: 24.11.2008
Сообщений: 416
Провел на форуме:
910902
Репутация:
100
|
|
Код:
http://www.css-school.ru/lessons/51-urok-css-21.-oformlenie-tekstovogo-polja.html
http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-prodolzhenie.htm
есть еще 1 урок, токо не смог найти его...сам я мало css занимался с недельку но я свой поиск оформлял так, не знаю как на счет валидности будет еще не тестил
css:
Код:
#search_form {background:url(Img/BkGr_2_05.jpg) no-repeat; position:relative; float:left; width:244px; height:29px; padding:0;} #search_form .search_text { position:relative;clear:left; float:left; background:#774d2b; border:none; left:18px; top:2px; width:154px; color:#FFF;} #search_form .search_Button { background:url(Img/BkGr_1_20.jpg); position:relative; float:left; width:70px; height:29px; border:none;left:20px;} #search_form .search_Button_move {background:url(Img/BkGr_1_20.jpg);background-position: 0 -29px;position:relative; float:left; width:70px; height:29px; border:none; left:20px; }
HTML:
Код:
<form method="get" action="http://www.google.ru/search?" id="search_form" target="_blank"> <input type="text" name="q" maxlength=110 value="Search" class="search_text"> <input type="submit" class="search_Button" value="" onMouseMove="this.className='search_Button_move'" onMouseOut="this.className='search_Button'"> </form>
смысл такой, рисуешь в фотошопе нужный тебе стиль, режишь, присваиваешь форме бекграунд с нужной тебе картинкой, и туда размещаешь инпут, цвет которого равен цвету формы, что бы бекграунды формы и инпута слились, и не забудь разместить инпут правильно что бы вводимый текст не выходил за края формы |
|
|