Css input как iphone

Создание кнопки переключения в стиле iOS с помощью CSS3 и Jquery

Как я уже говорил ранее, революция мобильных устройств началась, и теперь настало время создавать мобильные веб-приложения для своих веб-проектов. Многие сторонние платформы, такие как Apache Cordova и Phonegap, предлагают решения, с помощью которых вы можете конвертировать ваше веб-приложение в нативное мобильное приложение.

В этой статье я расскажу, как разработать кнопку переключения в стиле iOS с использованием HTML , CSS и Jquery . Особенно мне нравится использование псевдо-элементов CSS :before и :after . Это позволяет сократить HTML -код:

Примечание: для получения оптимального результата используйте браузеры Chrome , Firefox или Safari .

HTML код

Код HTML простой: нам всего лишь нужно включить элементы checkbox и switch DIV в тег label :

Switch контейнер

Простой HTML код:

После применения свойства border-radius :

Использование стиля Switch Before

:before является псевдо-элементом, вставляет стиль/контент перед DOM элементом:

Использование стиля Switch After

:after также является псевдо-элементом, вставляет стиль/контент после DOM элемента. В данном примере установка продолжительности перехода усиливает эффект анимации:

Стили SwitchOn :after :before

Задаем зеленый цвет для фона и перемещение:

Jquery код

Содержит код JavaScript , где в $(‘.switch’).click(function()<> — switch является именем класса для DIV . Используя Jquery класс toggleClass , можно добавлять и удалять класс switchOn , реагируя на клики мыши:

Финальная версия CSS

Элемент checkbox можно скрыть, задав display:none :

Источник

Remove iOS input shadow

On iOS (Safari 5) I have to following for input element (top inner shadow):

I want to remove top shadow, bug -webkit-appearance doesn’t save.

Current style is:

6 Answers 6

You’ll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it’s styles by using an attribute selector input[type=text] . Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.

Try this:

Helpful Links:

You can learn more about appearance here:

If you’d like to learn more about CSS attribute selectors, you can find a very informative article here:

Seems to remove the shadows as well.

As @davidpauljunior mentioned; be careful setting -webkit-appearance on a general input selector.

webkit will remove all properties

Try using the property box-shadow to remove the shadow on your input element

Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose type is «text» . There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.

Here’s the CSS I’m using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble tag too.

I tried to come up with a solution that a.) works and b.) I am able to understand why it works.

I do know that the shadow for inputs (and the rounded border for input[type=»search»]) comes from a background-image.

So obviously setting background-image: none was my first attempt, but this does not seem work.

Setting background-image: url() works, but i am still concerned about having a empty url() . Altough it currently is just a bad feeling.

background-clip: padding-box; seems to do the job as well, but even after reading the «background-clip» docs I don’t get why this completly removes the background.

My favorite solution:

This is valid css and I do understand how it works.

Источник

Верстка под iPhone

Здравствуй уважаемый читатель блога LifeExample, тема верстка под iPhone сегодня очень востребована, а спрос на нее растет все больше. Связанно это с тем, что пользователи перестали пользоваться только компьютерами, и активно бороздят просторы интернета с помощью всяческих мультимедиа, к которым, кстати, относится и iPhone. А так как продукты apple в последнее время заполонили потребительский рынок, то задача программирования и верстки сайтов под iPhone скоро может стать такой же необходимой, как и верстка для пользователей Internet Explorer.

В iPhone используется мобильная версия браузера safari. Честно скажу, под Mobile Safari верстать приятнее и легче, нежели чем под Internet Explorer. Основной вкуснятиной является полная поддержка CSS3 и HTML5 , поэтому сложностей при освоении верстки под iPhone, быть не должно, но нужно иметь в виду некоторые особенности.

Особенности сайтов под iPhone

1. Изображения не должны быть слишком большими

Не более 2048 x 1536 px. для iPhone с оперативной памятью до 256 Мб.
Не более 2592 х 1944 px. для iPhone с оперативной памятью больше 256 Мб.

2. Adobe Flash не поддерживается.
3. Кэшируются файлы размером не более 25 Kb.
4. Не поддерживается работа с файлами с помощью .
5. Могут возникнуть проблемы с использованием внешних шрифтов.
6. Не работает mouseOver так как нету курсора.
7. Отлично работает AJAX.
8. Поддерживаются новшества CSS3 и HTML5.
9. Можно использовать больше шрифтов, рекомендуется шрифт Helvetica.
10. Можно использовать функцию «звонок по клику»

11. Можно задавать цвета с альфа-каналом для прозрачности.

12. В свойстве background можно указать вывод нескольких картинок. Поможет сайту с картинками более 5 Мп (2592 х 1944).

Вы можете скачать и посмотреть презентацию: Верстка для iPhone (автор: Юрий Артюх)

Особенности Style.css для верстки под iPhone

1. Если сайт оптимизируется под iPhone, то макет сайта должен состоять из одной колонки, а элементы должны растягиваться на 100% ширины.
2. Не желательно использовать макет многоколоночного сайта.
3. Для оптимизированного сайта, линеаризуйте все блочные элементы.

4. Не нужно делать много элементов на странице. Для маловажных элементов дизайна пропишите свойство:

5. Шрифт текста можно немного увеличить. Либо использовать свойство -webkit-text-size-adjust , которое автоматически подгонит размер шрифта.

6. Не используйте свойство position: fixed; так как фиксированные элементы будут наезжать на нефиксированные.
7. По возможности замените абсолютные значения на процентные.
8. Картинки большого размера могут вылезти за края экрана, чтобы избежать этого используйте следующие правила:

Переключение на оптимизированную версию сайта

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

Также общий смысл виден и на этом изображении оптимизированной странички:

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

Можно организовать автоматическое формирование страниц c учетом верстки под iPhone, для этого нужно внести изменения в PHP код вашего сайта. Подробнее об этом можно прочитать в статье «Сайт для iPhone(url)«.

Масштабирование и ориентация сайта на iPhone

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

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

Или же вот таким способом:

Иконка сайта в home screen

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

Сохраним иконку 57 на 57 пикселей, в корне сайта с названием apple-touch-icon.png. Теперь по умолчанию iPhone будет использовать именно ее. Можно дать любое имя для иконки, но тогда нужно прописать следующий тег:

Как протестировать верстку под iPhone?

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

Но несмотря ни на что, вы все-таки можете воспользоваться эмулятором браузера iPhone. Из всех сервисов и приложений для эмуляции браузера Mobile Safari, получить результат схожий с тем, что показывали подручные iPhone и iPad, мне удалось лишь на этих сервисах:

Тестер верстки под iPhone : http://www.iphonetester.com/
Тестер верстки под iPad : http://ipadpeek.com/

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

Фреймворки для верстки

Я не являюсь фанатом фреймворков, мне больше нравится самостоятельно изобретать велосипед, но для целостности статьи я упомяну о популярных иструментах для верстки под iPhone. Итак, Вы можете воспользоваться следующими инструментами:

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

Читайте также похожие статьи:

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Источник

Стилизация флажков и переключателей с использованием CSS3

При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.

Итак, для начала добавим несколько обычных флажков и переключателей на форму:

Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:

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

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

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

Обратите внимание, что селекторы :before и :after позволяют добавлять содержание непосредственно до и после содержимого самой метки. Так как для меток мы задали относительное позиционирование (position: relative), то можем задавать контекстное абсолютное позиционирование для их содержимого.

Осталось скрыть индикаторы выбора, когда элемент не выбран, и, соответственно, отображать их, когда элемент находится в выбранном состоянии:

Добавим, что описанное здесь решение работает во всех современных версиях браузеров Chrome, Firefox, Safari, Opera, а также, начиная с версии 9, и в Internet Explorer.

Полностью CSS определения можно загрузить здесь.

Источник

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Other › CSS for styling form input on iPad/iPods/iPhones

I’ve just launched a new website and it all seems 99% fine (still needs a few tweeks here and there), but there’s an annoying problem with how the form input on the main index page appears on iPads/iPods/iPhones. The form input I’m refering to is the one in the middle of this page: http://www.joyokanjikai.com – it looks fine (dark blue) on the site when viewed by a regular browser, but looks terrible when viewed on Apple devices (faded and generally just horrible).

Any ideas what’s gone wrong with my CSS?

Many thanks,
Brin (still learning web design – definitely not a pro)

P.S. this button (a regular link, not a form input) looks fine on iPads/iPods/iPhones: http://www.joyokanjikai.com/random-kanji/ …

Hmmm…sorry if I wasn’t clear before. I’ve created three images to help show what I mean:

Can you see what I mean? The input button appears totally different (faded etc) on my iPod… I want it to look the same as the button (which is not an input but rather just a regular old styled link) shown in Image 3.

Add this: -webkit-appearance: none;

Edit:
And just to be safe, you could also add:

This disables browsers from using their native appearance for elements such as input fields.

I’ve added the above to make:

#searchform input <
-moz-appearance: none;
appearance: none;
>

but it appears to have made no difference… Any more ideas?

Sorry, forgot the code tags:

#searchform input <
-moz-appearance: none;
appearance: none;
>

hmmm: there should be a hash infront of “searchform” but it’s not appearing above.

Aha…now added “-webkit-appearance: none;” and IT HAS WORKED! THANK YOU. ^^ Oh, and: Merry Christmas!

Источник