Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Розмістити кнопку відправки форми всередині рамки для введення тексту.
Рішення
Треба розуміти, що безпосередньо додати кнопку всередину поля форми не можна. Тому будь-які методи лише імітують цей ефект. Для створення такої ілюзії слід прибрати вихідну рамку навколо поля для пошуку і додати її до елементу, усередині якого розташовується поле і кнопка. Даний метод працює найкраще коли всі розміри у нас мають фіксовані значення. У прикладі 1 загальна ширина форми задана як 300 пікселів, поле має ширину 274 пікселів, а кнопка — 20 пікселів. Ширина поля підібрана з урахуванням того, щоб не виникало переносів у формі, це негативно позначиться на загальному вигляді.
Деяких змін в код CSS зажадають браузери Safari і Chrome. При отриманні фокусу поля форми підсвічуються кольоровою рамкою, яка руйнує нашу ілюзію єдиного поля. Щоб цього не виникало, в стилі поля для пошуку додамо outline зі значенням none, це дозволить заблокувати появу межі зазначених браузерах. Навколо поля пошуку (<input type="search">у будь-якому разі залишиться тонка рамка, її можна видалити за допомогою специфічної властивості -webkit-appearance знову ж значення none.
Приклад 1. Форма пошуку
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма для пошуку</title> <style> .search { width: 300px; /* Ширина поля з кнопкою */ border: 1px solid #000; /* Параметри рамки */ min-height: 20px; /* Мінімальна висота */ } input[type="search"] { border: none; /* Прибираємо рамку */ outline: none; /* Прибираємо світіння в Chrome та Safari */ -webkit-appearance: none; /* Прибираємо рамку в Chrome та Safari */ width: 274px; /* Ширина поля */ vertical-align: middle; /* Вирівнювання по середині */ } input[type="submit"] { width: 20px; /* Ширина кнопки */ height: 20px; /* Висота кнопки */ border: none; /* Прибираємо рамку */ background: url(images/video.png) no-repeat 50% 50%; /* Параметри фону */ } </style> </head> <body> <form> <div class="search"> <input type="search" name="q"> <input type="submit" value=""> </div> </form> </body> </html>
Результат приклад показаний на рис. 1.
Рис. 1. Вигляд поля для пошуку з кнопкою
Саму кнопку можна додати по різному. Наприклад, зробити її звичайною кнопкою з написом, через <input type="image">, або, як у наведеному вище прикладі у вигляді кнопки з фоновим малюнком.