Leaderboard

Задача. Наложить стили на обычный Checkbox без js и jquery. использовав только чистый сss3 Решение 1. В html (tpl) сам checkbox выглядит следующим образом: <input type="checkbox" value="" id="" name=""> 2. Теперь нам нужно создать групповую разметку <div class="squaredThree"> <input type="checkbox" value="None" id="squaredThree" name="check"> <label for="squaredThree"></label> </div> 3. После того как разметка готова приступаем к написанию стилей. input[type=checkbox] { visibility: hidden; } таким образом мы скрываем к показу стандартный checkbox 4. Создаем стиль для разметки .squaredThree { width: 20px; margin: 20px auto; position: relative; } 5. Добавляем метку и фильтры, так же не забываем про обработку в IE .squaredThree label { cursor: pointer; position: absolute; width: 20px; height: 20px; top: 0; border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); background: -moz-linear-gradient(top, #222 0%, #45484d 100%); background: -o-linear-gradient(top, #222 0%, #45484d 100%); background: -ms-linear-gradient(top, #222 0%, #45484d 100%); background: linear-gradient(top, #222 0%, #45484d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 ); } 6. Применим к нашем стилям и метки - After. Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента .squaredThree label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 4px; left: 4px; border: 3px solid #fcfff4; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } 7. Теперь мы добавляем фильтры псевдоэлементу в режими активности (наведения) .squaredThree label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; } 8. Компонуем условие отображения. .squaredThree input[type=checkbox]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }

К примеру имеется база посредников своего города в Ексель файле (Ид.- ФИО - НазвАгентства - тел - емейл -скайп и т.д.) Мысли. - Создать новую таблицу в базе скрипта Желание - Отображать через новую форму поиска, например при вводе номера телефона - ответ "Это посредник" Или же при наведении на телефон в реквизитах объявления - всплывающая подсказка - "Данный номер телефона числится в нашей базе посредников" Ну в таком духе... Так как многие пользователи не совсем честно при регистрации на сайте представляются агентами. Посоветуйте, как можно это реализовать?