IMHO.WS

IMHO.WS (http://www.imho.ws/index.php)
-   Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)
-   -   Есть такая проблемка! (http://www.imho.ws/showthread.php?t=65498)

uerter 02.08.2004 10:38

imput text и его особенности!!!
 
Есть такая проблемка: как сделать поле для ввода текста когда она не активна у нее определенный цвет, а когда нажимаеш на нее то она свой цвет меняет.
Если я как-то не понятноо выражаюсь, то вы можете посмотреть что я имел в виду, смотрим http://www.nnm.org.ua, там есть поле для ввода определенного текска (поиск и правой стороны).
Как делать имено поле чтобы оно меняло свой цвет?

EvroStandart 02.08.2004 11:01

Открываем код страницы и смотрим.
Поле для поиска прописано так: <input type=text name=story size=18 class=name onfocus="id=className" onblur="id=''"">

Стили в отдельном файле styles.css:

Код:

A:link {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #00557d; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:visited {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #00557d; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:hover {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #00557d; FONT-FAMILY: Tahoma; TEXT-DECORATION: underline}
.center {BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BORDER-TOP: medium none; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; BORDER-LEFT: medium none; COLOR: #5c5c5c; PADDING-TOP: 1px; BORDER-BOTTOM: medium none; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
.righttable {BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BORDER-TOP: medium none; PADDING-LEFT: 13px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; BORDER-LEFT: medium none; COLOR: #5c5c5c; PADDING-TOP: 1px; BORDER-BOTTOM: medium none; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
.lefttable {BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BORDER-TOP: medium none; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; BORDER-LEFT: medium none; PADDING-TOP: 1px; BORDER-BOTTOM: medium none; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
.newstitle {BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BORDER-TOP: medium none; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; BORDER-LEFT: medium none; COLOR: #4f4f4f; PADDING-TOP: 10px; BORDER-BOTTOM: medium none; FONT-FAMILY: Tahoma; TEXT-ALIGN: center; TEXT-DECORATION: none}
.news {BORDER-RIGHT: medium none; PADDING-RIGHT: 10px; BORDER-TOP: medium none; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; BORDER-LEFT: medium none; COLOR: #4f4f4f; PADDING-TOP: 20px; BORDER-BOTTOM: medium none; FONT-FAMILY: Tahoma; TEXT-ALIGN: center; TEXT-DECORATION: none}
.newsbody {BORDER-RIGHT: medium none; PADDING-RIGHT: 22px; BORDER-TOP: medium none; PADDING-LEFT: 22px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; BORDER-LEFT: medium none; COLOR: #4f4f4f; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; FONT-FAMILY: Verdana; TEXT-ALIGN: justify; TEXT-DECORATION: none}
.link {BORDER-RIGHT: medium none; PADDING-RIGHT: 2px; BORDER-TOP: medium none; PADDING-LEFT: 2px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; BORDER-LEFT: medium none; COLOR: #00557D; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; FONT-FAMILY: Verdana; TEXT-ALIGN: center; TEXT-DECORATION: none}
div {FONT-SIZE: 11px; COLOR: #4f4f4f; FONT-FAMILY: Verdana;}
body {FONT-SIZE: 11px; COLOR: #4f4f4f; FONT-FAMILY: Verdana; TEXT-ALIGN: justify; TEXT-DECORATION: none}
table {FONT-SIZE: 11px; COLOR: #4f4f4f; FONT-FAMILY: Verdana; TEXT-ALIGN: justify; TEXT-DECORATION: none}
.name        {border: 1px; border-style: solid; border-color: #000000; background-color: #CADBEB; font-family: verdana; font-size: 12px; color: #000000;}
#name        {border: 1px; border-style: solid; border-color: #000000; background-color: #ffffff; font-family: verdana; font-size: 12px; color: #000000;}
.submit        {border: 0px; background-color: #CADBEB; font-family: verdana; font-size: 13px; color: #000000;}
table.tb1        {height:59; cellSpacing:0; cellPadding:0; width:100%; background-image: url('/images/main.jpg');}
table.tb2        {cellSpacing:0; cellPadding:0; width:100%;}
table.tb3        {cellSpacing:0; cellPadding:0; width:187;}
table.tb4        {height:35; width:187;}
IMG.button        {FILTER: alpha(Opacity=65)}

Для поля поиска должны быть две строчки:
.name {border: 1px; border-style: solid; border-color: #000000; background-color: #CADBEB; font-family: verdana; font-size: 12px; color: #000000;}
#name {border: 1px; border-style: solid; border-color: #000000; background-color: #ffffff; font-family: verdana; font-size: 12px; color: #000000;}

dacuan 02.08.2004 11:20

Делаешь так:
1) Открываешь http://www.nnm.org.ua;
2) Сохраняешь страницу себе на винт со всеми картинками и css-ами;
3) Разбираешься как они это сделали (обрати внимание на эту строку
Цитата:

<input type=text name=story size=18 class=name onfocus="id=className" onblur="id=''"">
)


Часовой пояс GMT +4, время: 16:03.

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.