Как уменьшить input css
Перейти к содержимому

Как уменьшить input css

  • автор:

Увеличить и уменьшить значение в поле input

Увеличивание и уменьшение значения в поле input с помощью кнопок плюс и минус. Может пригодиться в интернет-магазинах для указания количества единиц покупаемого товара. Требует наличия библиотеки jQuery.

Есть более лучшая альтернатива, данного способа: плагин Stepper.js

HTML

Кнопки плюса и минуса можно оформить картинками.

JS

В шапке подключаем jQuery библиотеку и добавляем такой код:

   

Input type number

В HTML5 появилось специальное поле с атрибутом type=»number» для вода чисел. Рассмотрим его возможности.

Для поля доступны следующие атрибуты:

Атрибут Описание
step Шаг изменения значения
max Максимальное значение
min Минимальное значение
placeholder Подсказка
readonly Только для чтения
disabled Заблокирован
list Связка со списком опций datalist по id
required Обязательный для заполнения

Шаг изменения

Атрибут step=»1″ задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).

Пример:

Минимальное значение

Атрибут min=»1″ задает минимально возможное значение value . Это значение должно быть меньше или равно значению max . Может быть целым, отрицательным или дробным.

Пример:

Максимальное значение

Атрибут max=»100″ задает максимально возможное значение value .

Пример:

Опции по умолчанию

У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента .

Пример:

Валидация

Если указать атрибут required , то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max .

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

Пример:

Также доступны CSS псевдо свойства :invalid и :valid , с помощью них можно применить стили к неправильно заполненному полю.

input[type="number"]:invalid+span:after < content: '✖'; padding-left: 5px; color: red; >input[type="number"]:valid+span:after
Пример:

Стилизация

Стандартными CSS-стилями можно изменить инпут:

input[type="number"] < background-color: #eee; vertical-align: top; outline: none; padding: 0; height: 40px; line-height: 40px; text-indent: 10px; display: inline-block; width: 100%; box-sizing: border-box; border: 1px solid #ddd; font-size: 14px; border-radius: 3px; >input[type="number"]:focus
Пример:

Убрать стрелки

input[type="number"] < -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; >input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button

Как стилизовать стрелки

К стрелкам не применить CSS стили, но есть JS-методы stepUp() и stepDown() для изменения значения. Так можно скрыть стрелки и добавить свои кнопки:

.number < display: inline-block; position: relative; width: 100px; >.number input[type="number"] < display: block; height: 32px; line-height: 32px; width: 100%; padding: 0; margin: 0; box-sizing: border-box; text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; >.number input[type="number"]::-webkit-outer-spin-button, .number input[type="number"]::-webkit-inner-spin-button < display: none; >.number-minus < position: absolute; top: 1px; left: 1px; bottom: 1px; width: 20px; padding: 0; display: block; text-align: center; border: none; border-right: 1px solid #ddd; font-size: 16px; font-weight: 600; >.number-plus
Результат:

29.09.2020, обновлено 08.10.2020
Предыдущая запись Загрузка файлов через jQuery AJAX
Следующая запись WebP вместо изображений в браузерах где он поддерживается

Комментарии 1

17 декабря 2020 в 15:58

Спасибо за очень полезный урок Мало где такое объяснение встретишь.Но я никак не могу решить, как реализовать ваше решение в Друпал 8.В шаблоне формы input.html.twig?Меня интересует пример №8 Стилизация кнопок.Как применить имеющийся у вас пример к существующему полю input number?Как например прописать этот код в теме сайта?

  • Скопировать ссылку
  • Пожаловаться

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

CSS стили для placeholder

CSS стили для атрибута placeholder можно задать через псевдокласс ::placeholder и вендорными префиксами для разных браузеров.

::placeholder

В ::placeholder можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе ::first-line .

Примечание: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.

Синтаксис

Error: could not find syntax for this item

Примеры

Красный текст

HTML
input placeholder="Введите что-нибудь!" /> 
CSS
input::placeholder  color: red; font-size: 1.2em; font-style: italic; > 
Результат

Зелёный текст

HTML
input placeholder="Введите что-нибудь. " /> 
CSS
input::placeholder  color: green; > 
Результат

Проблемы доступности

Цветовой контраст

Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

  • WebAIM: Color Contrast Checker
  • MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
  • Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Использование

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby (en-US) для программного связывания элемента с подсказкой.

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

label for="user-email">Ваш email адресlabel> span id="user-email-hint" class="input-hint">Пример: jane@sample.comspan> input id="user-email" aria-describedby="user-email-hint" name="email" type="email" /> 

Режим высокой контрастности Windows

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

Метки

Placeholder не является заменой элемента . Без метки, которая программно связывается с формой с помощью for и id атрибутов, такие программы, как скринридеры не смогут анализировать элементы .

  • MDN Basic form hints (en-US)
  • Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Спецификации

Specification
CSS Pseudo-Elements Module Level 4
# placeholder-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Псевдокласс :placeholder-shown , который позволяет применять стили к элементу с активным placeholder.
  • Связанные HTML-элементы: , (en-US)
  • HTML-формы

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как изменить размер поля input

Author24 — интернет-сервис помощи студентам

В Chrome это значение не действует, ничего не меняется.
Как изменить размер поля input в Chrome?
Заранее благодарен за ответ.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как увеличить размер поля input на полный размер ячейки td
Добрый день. Высота input имеет явно меньше ячейки td. <table.

Как изменить размер поля ввода?
нужно чтобы они были уже

Как изменить цвет и размер шрифта input type=»radio»
<input type="radio" value="rad1" checked="checked"> OPTION 1 .

Как изменить размер Dropdown-list-а под Input[type=»text»]
Доброго времени суток всем читающим. Столкнулся с такой штукой и не знаю, что делать. Есть форма.

Изменить размер поля формы
Доброго времени суток Как изменить размер полей textarea? Они у меня просто огромны! А нужно чтобы.

1594 / 865 / 279
Регистрация: 17.07.2021
Сообщений: 1,783
Записей в блоге: 12

ЦитатаСообщение от alanat Посмотреть сообщение

В IE размер поля input меняется при помощи size:

input по умолчанию inline-block и него действуют свойства width и height

Добавлено через 4 минуты
если нужно ограничить число вводимых символов можно воспользоваться html атрибутом maxlength

Добавлено через 12 минут

ЦитатаСообщение от alanat Посмотреть сообщение

В Chrome это значение не действует, ничего не меняется.

size работает в хром, задает ширину элемента input

Добавлено через 4 минуты
Атрибут size указывает количество символов, которое при визуальном отображении агент пользователя должен позволить пользователю видеть при редактировании значения элемента

Регистрация: 16.07.2012
Сообщений: 737

ЦитатаСообщение от mr_dramm Посмотреть сообщение

Атрибут size указывает количество символов, которое при визуальном отображении агент пользователя должен позволить пользователю видеть при редактировании значения элемента

Почему этот размер меняется только в IE, а в Chrome не меняется?
1594 / 865 / 279
Регистрация: 17.07.2021
Сообщений: 1,783
Записей в блоге: 12

ЦитатаСообщение от alanat Посмотреть сообщение

а в Chrome не меняется?

1 2 3 4 5
body> input type="text" size="20"> input type="text" size="10"> input type="text" size="50"> /body>

Регистрация: 16.07.2012
Сообщений: 737

ЦитатаСообщение от mr_dramm Посмотреть сообщение

1594 / 865 / 279
Регистрация: 17.07.2021
Сообщений: 1,783
Записей в блоге: 12

ну size да не работает с input[type=number] =)

Добавлено через 11 минут
Придумал на коленке особо не тестировал но заменой может стать что то вроде этого

input type="number" style="width: calc( 80ch + 20px)">

Добавлено через 3 минуты
где 80ch это size=80

Добавлено через 51 секунду
а 20px это отступы и скроллер цифр

Регистрация: 16.07.2012
Сообщений: 737

ЦитатаСообщение от mr_dramm Посмотреть сообщение

Придумал на коленке особо не тестировал но заменой может стать что то вроде этого
Первый раз такое вижу. Работает. Спасибо.
Заблокирован
alanat ,
Первый раз такое вижу. Работает. Спасибо.
так можно делать уже более 10 лет.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как изменить размер поля через vba?
Нужно установить размер поля с меньшего размера на больший Не могу понять, как можно изменить.

Изменить класс поля Input или Textarea
Как это реализовать? Ничего годного так и не нагуглил. При нажатии на инпут и при отжатии если.

Змейка — изменить размер поля
Помогите отредактировать код, чтобы поле было 20 на 20(а не 20 на 60), вместо одной точки.

Изменить размер поля таблицы присоединенной БД
Добрый день, нужно изменить структуру разделенной БД из клиентской, запрос CurrentDb.Execute.

Или воспользуйтесь поиском по форуму:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *