Проанализируйте способы заражения:

Злоумышленник может получить пароли к администраторским панелям CMS, FTP или SSH аккаунтам. Обычно пароли подбирают или крадут с помощью троянских программ , заразивших компьютер вебмастера.

Уязвимости веб-приложения могут позволять посторонним размещать на сайте произвольный код.

Из-за заражения внешнего ресурса (партнерской программы, баннерной системы, счётчика) предоставленный вам код может стать опасным для пользователей.

Найдите браузерный вредоносный код

Проанализируйте информацию о заражении в Яндекс.Вебмастере, в разделе Безопасность и нарушения . Раздел содержит перечень зараженных страниц, даты проверок и вынесенные антивирусом вердикты. Перейдя по ссылке в названии вердикта, вы увидите его описание и примерный вид кода, соответствующего вердикту (кода, который непосредственно появляется на страницах сайта).

Вы также можете самостоятельно воспроизвести проблему с помощью виртуальной машины .

Найдите серверный вредоносный код

1. Остановите веб-сервер, чтобы оградить посетителей сайта от потенциальной опасности. Затем проверьте антивирусом файлы веб-сервера и все рабочие станции, с которых администрируют сервер (можно использовать бесплатные антивирусные утилиты) и смените все пароли: root, FTP, SSH, от административных панелей хостинга и CMS.
2. Если до заражения была сделана резервная копия сайта, восстановите ее.
3. Обновите до последних версий все используемые сайтом программы и поищите описания исправленных уязвимостей. Возможно, это поможет понять, каким образом сайт был заражен.
4. Удалите лишних пользователей с расширенными правами и тщательно проверьте сервер на наличие веб-шелла, с помощью которого злоумышленник может изменять код сайта в обход авторизации.
5. Проверьте наличие вредоносного кода:

   во всех серверных скриптах, шаблонах CMS, базах данных;

   в конфигурационных файлах веб-сервера или интерпретатора серверных скриптов;

   если вы используете shared-хостинг, проверьте другие сайты, расположенные на том же сервере - может быть заражен весь сервер.

Признаки вредоносного кода:

Код посторонний или незнакомый, не соответствует резервной копии или системе контроля версий.

Обфусцированный (нечитаемый, неструктурированный) код.

Дата модификации файлов совпадает с временем заражения или более поздняя. Этот параметр ненадежен, так как дата модификации файлов может быть изменена вирусом.

Использование характерных для вредоносного кода функций. Примеры таких функций для языка PHP:

• динамическое исполнение кода (eval , assert , create_function);

Вредоносный код удален, что дальше?

Пометка об опасности сайта в результатах поиска будет снята, если при очередной проверке робот Яндекса не обнаружит заражения. Чтобы ускорить перепроверку, в интерфейсе Яндекс.Вебмастера, в разделе Безопасность и нарушения , нажмите кнопку Я все исправил .

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

Если вы нашли что-то интересное

Яндекс постоянно ищет и исследует новые виды заражений и публикует результаты исследований в блоге Безопасного поиска Яндекса .

Если вы обнаружили на своем сайте вредоносный или подозрительный код,

WordPress – одна из самых популярных систем управления контентом, использующаяся в самых различных целях: от ведения блогов до электронной коммерции. Существует широкий выбор плагинов и тем для WordPress . Случается, что какие-то из этих расширений попадают в руки вебмастеров после того, как некий злоумышленник потрудился над ними.

Ради своей выгоды он мог оставить в них рекламные ссылки или код, с помощью которого он будет управлять вашим сайтом. Многие пользователи WordPress не имеют большого опыта в веб-программировании и не знают, как действовать в такой ситуации.

Для них я сделал обзор девяти наиболее эффективных инструментов для обнаружения вредоносных изменений в коде работающего сайта или устанавливаемых дополнений.

1. Theme Authenticity Checker (TAC)

Theme Authenticity Checker (инспектор аутентичности тем, TAC) – WordPress -плагин, который сканирует каждую установленную тему на наличие подозрительных элементов вроде невидимых ссылок или кода, зашифрованного с помощью Base64 .

Обнаружив такие элементы, TAC сообщает о них администратору WordPress , позволяя ему самостоятельно проанализировать и при необходимости исправить исходные файлы тем:

2. Exploit Scanner

Exploit Scanner сканирует весь исходный код вашего сайта и содержимое базы данных WordPress на наличие сомнительных включений. Так же, как и TAC , этот плагин не предотвращает атаки и не борется с их последствиями в автоматическом режиме.

Он только показывает обнаруженные симптомы заражения администратору сайта. Если вы хотите удалить вредоносный код, придётся это сделать вручную:

3. Sucuri Security

Sucuri – хорошо известное решение в области безопасности WordPress . Плагин Sucuri Security осуществляет мониторинг файлов, загружаемых на WordPress -сайт, ведёт собственный список известных угроз, а также позволяет удалённо просканировать сайт при помощи бесплатного сканера Sucuri SiteCheck Scanner . За абонентскую плату можно дополнительно укрепить защиту сайта, установив мощный сетевой экран Sucuri Website Firewall :

4. Anti-Malware

Anti-Malware – плагин для WordPress, который способен находить и удалять троянские скрипты, бэкдоры и прочий вредоносный код.

Параметры сканирования и удаления могут настраиваться. Этот плагин можно использовать после бесплатной регистрации на gotmls .

Плагин регулярно обращается к сайту производителя, передавая ему статистику обнаружения зловредов и получая обновления. Поэтому если вы не хотите устанавливать на свой сайт плагины, отслеживающие его работу, то вам стоит избегать использования Anti-Malware :

5. WP Antivirus Site Protection

WP Antivirus Site Protection – это плагин, сканирующий все загружаемые на сайт файлы, в том числе WordPress -темы.

Плагин имеет собственную базу сигнатур, автоматически обновляемую через Сеть. Он умеет удалять угрозы в автоматическом режиме, оповещать администратора сайта по электронной почте и много другое.

Плагин устанавливается и функционирует бесплатно, но имеет несколько платных дополнений , на которые стоит обратить внимание:

6. AntiVirus для WordPress

AntiVirus для WordPress – простой в использовании плагин, который способен осуществлять регулярное сканирование вашего сайта и отправлять оповещение о проблемах безопасности по электронной почте. Плагин имеет настраиваемый «белый список » и другие функции:

7. Quterra Web Malware Scanner

Сканер от Quterra проверяет сайт на наличие уязвимостей, внедрений стороннего кода, вирусов, бэкдоров и т.д. Сканер обладает такими интересными возможностями, как эвристическое сканирование, обнаружение внешних ссылок.

Базовые функции сканера бесплатны, в то время как некоторый дополнительный сервис обойдётся вам в $60 за год:

8. Wordfence

Если вы ищете комплексное решение проблем безопасности вашего сайта, обратите внимание на Wordfence .

Этот плагин обеспечивает постоянную защиту WordPress от известных типов атак, двухфакторную аутентификацию, поддержку «чёрного списка » IP-адресов компьютеров и сетей, используемых взломщиками и спамерами, сканирование сайта на наличие известных бэкдоров.

Этот плагин бесплатен в своей базовой версии, но имеет и премиум-функционал, за который производитель запрашивает скромную абонентскую плату:

9. Wemahu

Wemahu осуществляет мониторинг изменений в коде вашего сайта и поиск вредоносного кода.

База данных, на основе которой ведётся обнаружение зловредов, пополняется методом краудсорсинга: пользователи сами пополняют её, отправляя результаты сканирования зараженных инсталляций WordPress на сайт автора плагина. Плагин также поддерживает отправку отчётов по электронной почте и другие полезные функции:

Перевод статьи «9 WordPress Plugins To Detect Malicious Code In Your Site » был подготовлен дружной командой проекта .

На днях хостинг провайдер reg.ru приостановил работу некоторых PHP функций (в частности mail – отправки сообщений) на сайте одного моего клиента, объясняя это тем, что в аккаунте было найдено вредоносное программное обеспечение, рассылающее спам. Перестала работать и приходить заказы, а это уже убытки. В связи с этим я решил рассказать вам, читатели сайт как проверить свой сайт на вирусы и вовремя удалить вредоносный код.

Ситуация нередкая, даже этот мой блог дважды становился жертвой взлома. Полностью обезопасить свой ресурс от появления вирусов невозможно, но необходимо свести риск к минимуму. Как правило, злоумышленники используют для проникновения уязвимости CMS, шаблонов оформления или неверные настройки хостинга.

Как действовать при подозрениях о заражении сайта на вирусы:

1. Проверить сайт на вирусы и найти файлы содержащие вредоносный код (об это будет половина статьи),
2. Удалить или вылечить обнаруженные файлы (вторая половина статьи),
3. Закрыть “дыры” в сайте, через которые проникли нехорошие скрипты.

Все 3 случая взлома, с которыми я сталкивался (2 моих и 1 клиентский) происходили по одной причине – на хостинге некоторые папки имели публичные права доступа 777, разрешающие всем желающим записывать туда любую информацию, так что пункт №3 про закрытие “дыр” самый важный. Про него я расскажу в конце.

Почему неэффективны онлайн антивирусы для сайта

Когда возникают реальные проблемы в работе сайта или появляются сообщения от Яндекс Вебмастер о заражении, многие начинают искать онлайн антивирусы для сайтов. Иногда они помогают, но в большинстве случаев делают это не до конца.

Проблема в том, что такие сервисы как antivirus-alarm.ru , virustotal.com , xseo.in , 2ip.ru и т.д. имеют доступ только ко внешней стороне вашего сайта. Это значит, что они обнаружат вредоносный код только, если он вылезет наружу и будет проявлять какие-то признаки.

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

Достоинство онлайн антивирусов: Простота использования – написал URL сайта, нажал кнопку и получил результат. Но, не факт, что нашел вирус.

Единственный эффективный способ выявить все проблемы – просканировать полностью все файлы, размещенные на хостинге, где лежит сайт. Сделать это можно имея доступ к хостингу, значит, антивирус должен работать непосредственно внутри файлов и папок вашего сайта.

Антивирусные плагины

Кстати, поклонникам популярных CMS в деле борьбы с вирусами везет немного больше, так как существуют плагины, способные своевременно их заметить и устранить. Про один такой плагин я рассказывал в статье о , он автоматом мониторит изменения в файлах движка и шаблонов. Но, даже он не всегда способен помочь, так как вирусы могут не только проникать в существующие файлы, но и создавать свои собственные, против которых плагин будет бессилен.

Одним словом – в критической ситуации может потребоваться полное сканирование всех файлов хостинга, включая тех, что не относятся к CMS.

Итак, переходим к разделу “Как проверить сайт на вирусы профессиональными способами?”.

Проверка файлов сайта антивирусом AI-Bolit

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

Последнее время я пользуюсь для этих целей разработкой Revisium – антивирусом AI-Bolit. Кроме своего антивируса для сайтов, этот сервис участвовал в совместной разработке антивируса для Яндекс.

Давайте по шагам пройдем все этапы поиска и лечения с помощью AI-Bolit.

Установка антивируса AI-Bolit

С этой страницы скачиваете архив с программой для хостинга – https://revisium.com/ai/ (файл небольшой).

Есть версия для Windows – для ее использования необходимо скачать все файлы сайта с хостинга себе на компьютер.

Есть версия для хостинга – проверка на вирусы идет прямо там (на сервере с сайтом). Я буду рассказывать о работе именно хостинговой версии, скачивайте ее.

Распакуйте скачанный архив, в результате, у вас появляется папка с названием аналогичным названию архива – ai-bolit, папка tools и 2 файла.

Для работы понадобится только содержимое из первой папки (ai-bolit), состоящее из 5 файлов. Необходимо закинуть в корневую папку вашего сайта (туда, где лежит ваш index.php) по FTP или через файловый менеджер эти 5 файлов.

Настройка программы

По умолчанию антивирус уже готов к работе, но в нем есть две настройки, которые вы можете применить для оптимизации программы под свои нужны. Все настройки делаются в файле ai-bolit.php.

1. Настройка глубины сканирования. Она может быть 3 степеней: 0 – быстрая проверка, 1 – экспертная, 2 – параноидальная, по умолчанию стоит 1. Отвечает за этот параметра строка:

define("AI_EXPERT_MODE", 1);

define ("AI_EXPERT_MODE" , 1 ) ;

2. Пароль для доступа к программе. Если вы планируете держать антивирус на хостинге постоянно, то необходимо задать максимально сложный пароль взамен тому, что идет по умолчанию, иначе, через сам антивирусник злоумышленники смогут навредить сайта. Если же вас интересует одноразовая проверка, после которой файлы антивируса с хостинга будут удалены, то можете оставить пароль по умолчанию. Отвечает за пароль строка:

define("PASS", "1122334455");

define ("PASS" , "1122334455" ) ;

После сохранение настроек переходим к запуску сканера.

Запуск программы

Дальнейшие действия будут проводиться через браузер. В адресной строке вам необходимо набрать URL ведущий на запускающий файл ai-bolit – ваш-сайт/ai-bolit.php?p=указанный-пароль .

Через некоторое время сканирование всех файлов вашего сайта будет завершено и вы получите отчет вот такого вида:

Проблемы при запуске

Так как антивирусная проверка сайта создает на сервер хостинга немалую нагрузку, часто хостеры запрещают работу подобных программ. В этом случае вы можете столкнуться с сообщениями об ошибке, например такими:

В этом случае есть 3 варианта:

1. Хостер сам осуществляет сканирование на вирусы и предупреждает клиентов об их появлении.
2. Хостер может разрешить вам проверку после запроса в службу технической поддержки.
3. Скачивайте файлы сайта на компьютер и проверяйте версией антивируса для Windows.

Анализ результатов

Полученный при сканировании отчет можно использовать двумя способами – передать его специалисту, чтобы он разобрался с его содержимым или самостоятельно просмотреть каждую подозрительную строчку. Нередко, за вирусы принимаются особенности шаблонов или специализированные скрипты (особенно на параноидальном уровне проверки).

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

Закрываем уязвимости сайта

Теперь об устранении причин заражения. Выше я говорил, что чаще всего вирусы заливаются через папки, имеющие общий доступ для всех – права доступа 777 (rwxrwxrwx).

Если на какой-то папке вашего сайта стоят такие права, туда можно залить вирусный файл и уже через него распространить вредоносный код по сайту.

Для того, чтобы заражение не повторилось после вашего лечения, надо проверить каждую папку, в которой Манул нашел инфицированные файлы и, если надо, сменить права – запретить общий доступ – выставьте свойства 755 (rwxr-xr-x).

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

На этом у меня сегодня все – здоровья вашим проектам.

Полезные статьи:

• 
  
  Как заработать деньги в интернете новичку – 23…
• 
  
  Что такое блог, как его создать, раскрутить и как…

Как одна из наиболее популярых платформ, WordPress время от времени подвергается атаке троянами, внедрением вредоносного кода и т.п.

Существует несколько статей о , созданных при помощи WordPress. В них так же содержится информация и о том, как очистить ваш ресурс от вредоносного ПО. Данная тема настолько актуальна и критична, что постоянное её обсуждение не только не навредит, но и пойдёт на пользу хозяевам различных сайтов.

Новички в создании сайтов, кто только начал использовать для работы различные CMS, довольно-таки не слабо пугаются, когда обнаруживают что их ресурс подвергся атаке вирусов. Пытаясь восстановить нормальную работу проектов, они совершают различные ошибки, что в итоге усугубляет ситуацию и в ряде случаев приводит к потере данных или необходимых файлов. В данной статье мы расскажем вам о том, как изучить актуальные угрозы, обнаружить их и очистить сайт от вирусов, не навредив тем самым вашим данным и контенту.

Делайте резервные копии регулярно!

До того, как мы начнём дискуссии по поводу взлома ВордПресс, крайне необходимо обсудить создание резервных копий. Если вы пользуетесь WordPress и планируете иметь большое количество посетителей, вы просто обязаны заиметь привычку регулярно создавать резервные копии блога. Сохраняйте весь контент, настройки и базы данных, чтобы иметь возможность полностью восстановить все файлы. Это не займёт много времени, зато поможет избежать серьёзных проблем в будущем.

Что лучше: восстановление сайта или своевременное обнаружение вируса?

Если вы используете определённые утилиты для создания резервных копий, к примеру, вы имеете возможность вернуть проект к первоначальному состоянию. Но, тем не менее, думаю, что это не очень хорошая идея. Используя преимущество создания резервных копий, без поиска и удаления вредоносного кода, не поможет решить проблему, ваш сайт всё так же останется в уязвимом состоянии. Так что лучшим решением будет найти вирус, избавиться от него, восстановить сам сайт и в последствии закрыть уязвимость.

Обнаружение вредоносного программного обеспечения

Вредоносное ПО – это контент, распространяющийся с намерением навредить или же получить ваши персональные данные. Данный вредоносный код может быть подменён либо вставлен в элементы оформления, плагины, файлы или базу данных. Если сайт был взломан, вредоносное программное обеспечение может попасть и на компьютеры посетителей, перенаправляя их на различные ресурсы, так же содержащие другие вирусы, или же просто открывать необходимые сайты через фреймы с вашего сайта. На данный момент существует много различных вариаций взлома, как вордпресс движков, так и любых остальных сайтов.

Поиск заражённых страниц

Вы можете начать поиск, просматривая страницы на наличие вредоносного кода злоумышленников.

• Виден ли он на всех страницах?
• Появляется ли он на определённых страницах или сообщениях?
• Где именно появляется вредоносный код? Находится ли он в нижней сноске, в оглавлении страницы, где-то в контенте или же в боковой колонке?

Ответы на данные вопросы подскажут вам, где именно искать проблему.

Проверьте элементы дизайна и плагины на наличие вредоносного кода

Наиболее часто заражаемыми объектами бывают темы оформления и плагины. Поиск кода вы можете начать с того, что проверите активную тему (используемую сейчас) на наличие вредоносного кода. Если у вас добавлены какие-то либо темы, кроме стандартной, проверьте каждую из них.

Самым простым способом проверки является копирование на локальный компьютера резервной копии всей директории с темами оформления, затем удаление всей папки с темами с вашего сервера. Затем, скачайте с официального источника стандартную тему оформления для WordPress под названием TwentyEleven и загрузите её на сервер. После завершения всех процедур проверьте сайт – если код злоумышленников исчез, значит, проблема была в одной из тем оформления.

Теперь, вы сможете найти вредоносный код в старой папке тем оформления, поочерёдно открывая каждую из них в текстовом редакторе. Пролистывая код, вы можете заметить подозрительно выглядящую его часть и избавиться от неё. Существует так же и более лёгкий вариант – вы можете просто скачать новую копию активной темы оформления с сайта разработчиков.

Представим себе такой вариант событий, что вы не смогли найти вирус в ваших шаблонах. Тогда, следующим шагом будет поиск его в используемых вами плагинах. В данном случае подойдёт тот же метод, что используется в случае с темами оформления.

Создайте резервную копию подключаемых плагинов на локальном компьютере, при этом удалив их с сервера. Далее проверьте ваш сайт на наличие вредоносного программного обеспечения, не исчез ли он. Если проблема решена, значит, она была в одном из ваших плагинов. Скачайте свежие копии плагинов, что у вас были и поочерёдно подключите их. В том случае, если вирус снова появился после загрузки и установки новых копий, удалите заражённый плагин с вашего сервера.

Лучшие способы обезопасить ваши темы оформления и плагины:

1. Удалите неиспользуемые плагины и темы оформления.
2. Убедитесь, что скачиваете темы и плагины из надёжного источника.
3. Постоянно скачивайте обновлённые версии используемых тем и плагинов.
4. Не используемые скачиваемые с различных торрентов и неофициальных сайтов темы оформления и плагины.

Как обнаружить вредоносный код, вшитый в сам WordPress:

Если вы проверили темы оформления и используемые вами плагины, а заражение всё ещё присутствует на вашем сайте, следующим шагом будет проверка основных файлов WordPress. И снова тут поможет способ, применяемый в случаях с темами и плагинами.

Прежде всего, создайте резервную копию всех необходимых файлов (к примеру, файла wp-config, папку wp-content, а так же файлы.htaccess и ). После этого удалите все файлы с сервера, скачайте новый архив движка и загрузите его на сервер. Заполните файл wp-config необходимой информацией. После этого проверьте сайт на наличие вирусов, если они исчезнут, значит, проблема была в самом портале – были заражены основные файлы движка. Восстановите из резервной копии необходимый контент: изображения, различные видео или аудио файлы.

Как защитить от заражения основные файлы WordPress:

1. Убедитесь, что права доступа 644 установлены на все файлы.
2. Не изменяйте и не перемещайте основные файлы.
3. Везде используйте лишь сложные пароли — на FTP, Базу данных, WordPress и т.д.

Как обнаружить узявимость в базе данных WordPress:

Следующим шагом будет проверка баз данных. Прежде всего, удостоверьтесь в том, что вы имеете резервную копию базы данных. Если вы регулярно создаёте резервные копии, вы можете быстро и без проблем восстановить его в первоначальный вид, но первое, что вам нужно сделать, это убедиться в том, что уязвимость находится именно в базе данных.

Скачайте и установите плагин для поиска эксплоитов Exploit Scanner . Запустите плагин и просканируйте сайт. Плагин для поиска эксплоитов просканирует вашу базу данных, основные файлы портала, плагины и темы оформления на наличие подозрительного кода и при окончании сканирования выдаст результаты. Как только сканирование закончится, вам нужно будет пробежаться взглядом по результатам. В отчете о сканировании вы обнаружите большое количество ложных угроз и предупреждений, так что читайте журнал медленно и внимательно. Сканер не удаляет ничего, так что как только вы найдёте вредоносный код, вам будет необходимо вручную удалить его с базы данных.

• Если вы не создавали резервную копию базы данных ранее, сделайте это, даже если ваш сайт подвергся атаке и был заражён.
• Иметь базу данных с заражением в любом случае лучше, чем вообще не иметь резервных копий.

Скопируйте подозрительно выглядящий код из журнала сканирования, если таковой обнаружил сканер эксплоитов, и выполните запрос через mysql, как будто сайт работает в штатном режиме и данный запрос был сделан через phpmyadmin.

Исходя из того, куда вставлен подозрительный код, например это статьи, комментарии или какие-то либо разделы, вам нужно будет вставить его в только что созданную базу данных и посмотреть, что же в итоге выйдет. Если в результатах сканирования не так много подозрительных моментов, можете смело редактировать поля вручную, удаляя ненужный код. В другом случае, если в базе данных присутствует слишком большое количество подозрительного кода, вы возможно захотите воспользоваться опцией Найти и Заменить, но данный способ довольно-таки опасен, и если вы не уверены – существует риск потери важных данных.

Прошлись по всем пунктам, и у вас закончились идеи, где искать проблему?

Я думаю, что большинство людей может с лёгкостью обнаружить, изучить и удалить вирус, если их сайт, подвергся атаке и был заражён. Но, тем не менее, обнаружить вирус в определённых случаях бывает довольно таки сложно. На тот случай, если вы перепробовали все описанные выше способы и так не смогли найти, в чем именно проблема, вы всегда можете обратиться к экспертам по безопасности WordPress – которые с лёгкостью могут очистить ваш сайт от вирусов за определённую плату.

Поиск наиболее подходящего специалиста по безопасности по продукции компании WordPress

Существует множество сайтов, посвящённых фрилансингу, где вы можете предложить вознаграждение за помощь в решении проблемы. Перед окончательным выбором кандидатуры обратите внимание на отзывы и награды, которые он получил, и выберите самого опытного и компетентного. Так же вы можете разместить предложения на популярных SEO-форумах или биржах фриланса. Обязательно убедитесь в том, что нанимаемый вами человек имеет хорошую репутацию, отзывы и опыт работы.

Заключение

Сайты на WordPress защищены настолько, насколько это возможно. Как владелец сайта вы обязаны следить за состоянием сайта, использовать самые современные методы для защиты от возможных угроз. Используйте сложные пароли, регулярно проверяйте права доступа и создавайте резервные копии, своевременно очищайте сайт от лишней информации.

Очень часто дизайнеры рисуют макеты с нестандартными элементами форм, т.е. оформление чекбоксов, радиокнопок, инпутов и селектов отличается от того, что рендерит браузер по умолчанию. Таким образом, перед верстальщиком возникает задача кастомизировать оформление, в том числе это касается элементов select.

В статье мы рассмотрим, как изменить внешний вид select-ов. Однако мы будем придерживаться следующей идеологии. Кастомизировать имеет смысла только дефолтное свёрнутое состояние селекта, а оформление выпадающего списка должно оставаться стандартным. Поэтому решение, описанное ниже, не подойдет, если вам требуется сложный выпадающий список, например, с иконками или чекбоксами для каждого option.

С другой стороны такой подход позволяет:

1. Не писать javascript код, который эмулировал бы поведение селектов. Вся логика возлагается на браузер. Плагинов на сегодняшний день очень много, но не часто встретишь такой, который обрабатывал бы все крайние случаи, возникающие у пользователя при взаимодействии с этим контролом. Примером такого крайнего случая может служить автоматический выбор положения выпадающего списка (открытие вниз или вверх).

2. Раз за поведение и оформление выпадающего списка отвечает браузер, то и не требуется писать какое-то отдельное решение для мобильных устройств, которое позволяло бы удобно работать с селектами на тач-устройствах с маленькими экранами. Встроенные нативные селекты сами принимают нужный вид, ведь на мобильных платформах уже всё продумано. Например, пользователи iOS при клике по селекту увидят не ваш кастомный список, а стандартный привычный. Пользователям не нужно будет подстраивать своё поведение под ваш конкретный сайт, его поведение будет таким же как на всех других сайтах. И ему это удобно, а ради него вы и делали сайт.

Итак, как уже было сказано, для оформления select достаточно CSS3 свойств.

Основное свойство, которое позволит изменить внешний вид селекта, это appearance . Оно заставляет какой-либо элемент принять вид того, что вы захотите, например, можно заставить див стать кнопкой. Однако в рамках нашей задачи интересно значение none , которое означает, что к элементу вообще не нужно применять какой-либо стиль. Таким образом, мы сможем убрать специфичный для селекта атрибут - стрелочку вниз справа.

Select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; }

Как видно, убрать стрелку не составило труда, теперь остаётся добавить несколько тривиальных CSS-свойств вроде рамки, шрифта и прочего. Здесь конечно же можно добавить и скругление уголков, и тени и прочее, всё как нарисовал дизайнер в макете. Главное выпадающий список остаётся нативным.

Select { background: transparent; display: block; width: 100%; border: 1px solid #a7a7a7; color: #32353a; font-family: 16/Arial, sans-serif; font-size: 16px; line-height: 1.4; font-weight: normal; padding: 7px 10px 7px 10px; height: 36px; vertical-align: top; outline: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; }

Теперь остаётся добавить фоном стрелку или какую-либо другую иконку. Использовать фон будем, поскольку псевдоэлементы вроде before и after для селекта работать не будут. Для лучшего отображения сайтов на различных устройствах с разным плотностью пикселей, на различных масштабах и т.п. принято использовать SVG иконки. Поэтому с помощью онлайн URL-encoder для SVG сконвертируем иконку в data URI. При этом важно помнить, что тег SVG должен иметь атрибут xmlns="http://www.w3.org/2000/svg" .

Получится следующий результат.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" fill-rule="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

Поскольку стрелка используется нестандартная, то можно переместить её влево или использовать вместо стрелки любое другое изображение, а можно и вовсе обойтись без иконок.