Question

Здравствуйте, подскажите у этого поиска поле ввода белое. Как сделать например его синем, а при нажатие что бы остался белым?

 <form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >     <input class="poick_pole" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>     <input class="poick_knopka" type="submit" value="Найти" />     <input type="hidden" name="t" value="0" />     </form>

 

 /* Форма поиска синяя кнопка*/     .poick_os {     float:left;     padding:4px;     width:300px;     background:#fff;     border: 1px solid #A0A8AC;     }      .poick_os input {     float:left;     margin:0px;     vertical-align:middle;     font:11px Verdana,Arial,Helvetica,sans-serif;     }      .poick_pole {     color:#555;     width:220px;     height:15px;     border:none;     padding:6px 4px;     }         .poick_knopka {     text-shadow: 1px 1px 1px #1061B0;     width:70px;     height:27px;     cursor:pointer;     background:#36A6FA;     border:1px solid #2290e3;     color:#fff; font-weight: bold!important;     }         .poick_knopka:hover {background:#3c9fea;}      .poick_os,     .poick_knopka {     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 3px;     }

Можно ли окно ввода вставить иконку font-awesome, если можно то как?

Answer 1

Изучайте материал - http://htmlbook.ru/css/focus и все у вас получится.

Comments

Ценю, ваш ответ, важна практика, подскажите и я запомню.

---

Руслан Алексеев,

уточните ссылку на сайт, будем смотреть на реальном примере

---

  .poick_pole:focus {      background: #000; /* Цвет фона */      border: 1px solid #29B0D9; /* Параметры рамки */    }

Получается на оборот

---

Yuri_Geruk,

Тренеруюсь, тут http://codepen.io/

---

Yuri_Geruk,

Вот так получилось) 

 

 /* Форма поиска синяя кнопка*/   .poick_pole:hover,.poick_pole:focus {background:#fff;}  .poick_os {float:left;padding:7px;width:auto;}   .poick_os input {float:left;margin:0px;vertical-align:middle;font-size:11.5px;background-color: rgba(63, 113, 166,0.3);} .poick_pole {color:#555;width:auto;imheight:25px;border:none;padding:6px 4px;}   .poick_os, .poick_knopka {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} /* ------------------------- */

Как убрать белую рамку вокруг?

---

Yuri_Geruk,

Можете подсказать теперь синий фон и на нём не видно надписи "Найти" менял .poick_pole {color:#fff;}, но тогда при вводе фон белый и буквы.  Как сделать на синем фоне белый цвет текста, на на белом серый?

---

Руслан Алексеев,

Никой проблемы не вижу, давайте договоримся так, вы устанавливаете форму на сайт и смотрим на реальном примере, на этих онлайн сервисах ничего исправлять не будем.

---

Yuri_Geruk,

Хорошо как под дизайн подверстаю, просто там быстрей.