Рамка с эффектом

[erik87]

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

Спасибо

 

[Extalionez]

bootstrap, как подробней объяснить даже не знаю

 

[latteo]

bootstrap

Жжешь, bootstrap это набор инструментов для вёрстки с нуля или по крайней мере многих элементов.

Для смены рамки при наведении курсора использую псевдокласс hover Для просмотра ссылки Войди или Зарегистрируйся
Пример:

div.search  input:hover{
border:1px solid #74b9ef;
}

div.search меняйте на свои пути.

 

[Extalionez]

Жжешь, bootstrap это набор инструментов для вёрстки с нуля или по крайней мере многих элементов.

Для смены рамки при наведении курсора использую псевдокласс hover Для просмотра ссылки Войди или Зарегистрируйся
Пример:

div.search  input:hover{
border:1px solid #74b9ef;
}

div.search меняйте на свои пути.

именно этот эффект и вид интерфейса используется в bootstrap. хотя конечно я о нём знаю лишь по joomla 3(да я и не верстальщик , просто 'каждой бочке затычка'), но там везде именно так(целиком как на скрине) всё выглядит. это точно bootstrap
Вот оно(Для просмотра ссылки Войди или Зарегистрируйся) во вложении. Люблю сумничать там, где я дуб-дубом)

Спойлер: Оффтоп

Такая фигня этот бутстрап на деле оказалась.

 

[mdrive]

bootstrap крутая штука, думаю скоро половина дизайнов будет делаться на нём, но для этого эффекта достаточно box-shadow эффекта css3 тут всё подробно расписано Для просмотра ссылки Войди или Зарегистрируйся

 

[Extalionez]

bootstrap крутая штука, думаю скоро половина дизайнов будет делаться на нём, но для этого эффекта достаточно box-shadow эффекта css3 тут всё подробно расписано Для просмотра ссылки Войди или Зарегистрируйся

Ну во-первых bootstrap так-себе. А во-вторых что-то я там анимации появления не увидел как на bootstrap. Для этого явно надо JS подключать

 

[stylebig]

Вот мой готовый пример, который я обычно использую.

<style>
input {
position: relative;
width: 250px;
font-size: 17px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px 12px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
 
input:focus {
border-color: #930;
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}
</style>
 
<input id="s" type="text">

 

[Guyri]

Держите точный код из бустрапа, действует на стандарты input(какие думаю заметите)

А вы ребят на предлагали весь набор, но не того

<style>
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

 

[gerasimov.nikita]

Просто для input:active{} назначаете стиль.
Конкретно в данном случае цвет границы и box-shadow.

 

[kuzmit42]

bootstrap крутая штука, думаю скоро половина дизайнов будет делаться на нём, но для этого эффекта достаточно box-shadow эффекта css3 тут всё подробно расписано Для просмотра ссылки Войди или Зарегистрируйся

Какой смысл вообще делать с помощью его сайты ?
Куча лишнего кода и скриптов, к примеру возьмем шаблоны Joomla от студий. только библиотеки mootools, jquery = 200кб. +куча скриптов вспомогательных +bootstrap
Одна страница будет весить по 1мб. И это без графики.
В чем смысл такого счастья.
Имхо верстку нужно делать самому и без использования всякой ненужной фигни. которая только нагружает сайт. по одному файлу .html, .css, .js
И будет весить 100кб.
Разница как вы понимаете существенная. Если конечно не нужно чтобы сайт сиял всякими всплывающими шнягами - как новогодняя елка