input-самоуправство браузеров!

[Torawhite]

Здравствуйте! Столкнулся с различной самостилизацией формы запроса "input" некоторыми браузерами:

Если выставлять, например,type="text" а в CSS прописать height: 30px, то:

- Firefox выставляет высоту 32px;

- Safari выставляет высоту 35px и закругляет углы.

 

Если выставлять, например,type="searcht" а в CSS прописать height: 30px, то:

- Firefox выставляет высоту 32px;

- Safari выставляет правильную высоту, но максимально закругляет углы (радиусом в половину height).

 

type="email" - тоже вёрстка различная, safari закругляет углы и увеличивает высоту!

border-radius: none; - не помогает

Как добиться единой стилизации формы запросы и отключить стилизацию браузера?

[rus]

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

[Torawhite]

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

А как их сбросить? Подскажите, если не сложно!

[kattiperk]

Для этого нужно обнутить стили для инпута.

Это margin, padding, border, outline, :focus. И если надо, то border-radius

[rus]

А как их сбросить? Подскажите, если не сложно

запрос в гугл: https://www.google.ru/?gws_rd=ssl#newwindow=1&q=%D1%81%D0%B1%D1%80%D0%BE%D1%81+%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9

[Great Rash]

/* для современных браузеров */

.input[type] {

  display: inline-block;

  -webkit-appearance: none;

  -moz-appearance: none;

  -ms-appearance: none;

  -o-appearance: none;

  appearance: none;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

/* для ИЕ (включая 11) и браузеров постарше */

.input {

  display: inline-block;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-size: inherit;

  line-height: 1;

  font-family: inherit;

  border: 0;

  background: none;

  zoom: 1;

}

[Torawhite]

 

А как их сбросить? Подскажите, если не сложно

запрос в гугл: https://www.google.ru/?gws_rd=ssl#newwindow=1&q=%D1%81%D0%B1%D1%80%D0%BE%D1%81+%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9

 

 

 

/* для современных браузеров */.input[type] {  display: inline-block;  -webkit-appearance: none;  -moz-appearance: none;  -ms-appearance: none;  -o-appearance: none;  appearance: none;  -webkit-box-sizing: 0;  -moz-box-sizing: 0;  box-sizing: 0;}/* для ИЕ (включая 11) и браузеров постарше */.input {  display: inline-block;    -webkit-box-sizing: 0;  -moz-box-sizing: 0;  box-sizing: 0;  margin: 0;  padding: 0;    font-size: inherit;  line-height: 1;  font-family: inherit;  border: 0;  background: none;  zoom: 1;}

Спасибо! Но ничего не изменилось - что закруглялось, то закругляется, что было увеличено, то осталось увеличено. Возможно, я сделал что-то не так:

1. Создал отдельный .css файл с ресетом от Эрика и поставил в списке загрузки таблиц стилей первым;

2. Создал отдельный .css файл с ресетом, который предложил Great Rash и поставил в списке загрузки таблиц стилей вторым.

[Galaxy]

дефолтные стили инпутов и будут отличаться.

[Torawhite]

дефолтные стили инпутов и будут отличаться.

Должен быть способ привести их к общему стилю, думаю. Зачем т огда нужны все эти ресеты? Смотрится ужасно, когда рядом с полем поиска кнопка подтверждения поиска ниже на 2 пикселя, чем само поле поиска, а высота в стилях указана одна. Я уже про закругление углов не говорю.

[Galaxy]

не так написал, дефолтное отображение инпутов , скролов и т.д будет разное.

[Great Rash]

Спасибо! Но ничего не изменилось

Дайте ссылку на сайт.

[Torawhite]

 

Спасибо! Но ничего не изменилось

Дайте ссылку на сайт.

 

http://torawhite.ru/

 

Спасибо! Но ничего не изменилось

Дайте ссылку на сайт.

 

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

[Great Rash]

Я не вижу, чтобы вы там что-то обнулили. Моих стилей я тоже там не вижу.

[Torawhite]

Я не вижу, чтобы вы там что-то обнулили. Моих стилей я тоже там не вижу.

<link rel="stylesheet" type="text/css" href="http://www.torawhite.ru/css/reset.css">

<link rel="stylesheet" type="text/css" href="http://www.torawhite.ru/css/input_reset.css">

 

Вот, обе таблицы, они подключены

[rus]

input_reset.css - его либо нет, либо не в той директории находится, он не загружен.

[Torawhite]

input_reset.css - его либо нет, либо не в той директории находится, он не загружен.

Вы правы. Забыл закинуть. Закинул, но всё равно ничего не изменилось...

[Great Rash]

Закинул, но всё равно ничего не изменилось...

А класс .input кто будет применять к инпуту?

[Torawhite]

 

Закинул, но всё равно ничего не изменилось...

А класс .input кто будет применять к инпуту?

 

Спасибо! Применил. Высота в Firerxox выровнялась, но закругления в Safari остались без изменений

[Great Rash]

Safari на винду уже давно не делают, поэтому нет возможности проверить что там не так. Гуглите.

[Torawhite]

Safari на винду уже давно не делают, поэтому нет возможности проверить что там не так. Гуглите.

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

[Torawhite]

Safari на винду уже давно не делают, поэтому нет возможности проверить что там не так. Гуглите.

Вариант с блоком полностью решил проблему.

[Great Rash]

Оу, сейчас заметил, что я в стилях напортачил, надо поменять box-sizing: 0; на box-sizing: border-box;

[Torawhite]

Оу, сейчас заметил, что я в стилях напортачил, надо поменять box-sizing: 0; на box-sizing: border-box;

Изменил, спасибо. Но углы также закругляет.

[Great Rash]

Углы тут не при чем.

[Int]

А если ему border задать, всё равно закругляет? Или с border поулчится не то, что надо?

[Torawhite]

А если ему border задать, всё равно закругляет? Или с border поулчится не то, что надо?

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