Как стилизовать input date css

Prefilling a Date Input

Take your JavaScript to the next level at Frontend Masters.

HTML has a special input type for dates, like this: <input type="date"> . In supporting browsers (pretty good), users will get UI for selecting a date. Super useful stuff, especially since it falls back to a usable text input. But how do you set it to a particular day?

To set a particular day, you&#8217;ll need to set the value to a YYYY-MM-DD format, like this:

Minor note: placeholder won&#8217;t do anything in a browser that supports date inputs. Date inputs can have min and max , so only a date between a particular range can be selected. Those take the same format. Just for fun we&#8217;ve used a step value here to make only Tuesday selectable:

How about defaulting the input to the value of today? Unfortunately, there is no HTML-only solution for that, but it&#8217;s possible with JavaScript.

It&#8217;s also possible to select a specific week or month. Prefilling those is like this:

If you need both date and time, there is an input for that as well. Just for fun

Or just time! Here we&#8217;ll use step again just for fun to limit it to 15 minute increments:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Как стилизовать кнопку ввода и отправки с помощью CSS?

Я учусь CSS. Как стилизовать кнопку ввода и отправки с помощью CSS?

Я пытаюсь создать что-то подобное, но понятия не имею, как это сделать

enter image description here

11 ответов

У меня есть проблема с стилизацией различных полей формы с помощью CSS У меня есть код CSS: #form input Теперь этот код стилизует все три поля ввода, которые у меня есть (ниже), но также стилизует кнопку отправки изображения.

Как мне стилизовать элемент управления членством asp.net с помощью css? Я хотел бы поместить разные классы на имя пользователя textbox, пароль textbox и кнопку входа.

Вот отправная точка

CSS:

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

В качестве примера вы могли бы написать

Комбинируйте с другими селекторами

Я бы предложил вместо использования

Кнопка была введена специально с учетом стиля CSS. Теперь вы можете добавить к нему фоновое изображение градиента или стилизовать его с помощью CSS3 градиентов.

Подробнее о структуре форм HTML5 читайте здесь

Ваше здоровье! .Pav

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

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

Для надежности я бы предложил дать имена классов или id s элементам стиля (в идеале class для текстовых вводов, так как их, вероятно, будет несколько) и id для кнопки отправки (хотя class также будет работать):

Для большего количества браузеров up-to-date вы можете выбрать по атрибутам (используя тот же HTML):

Вы также можете просто использовать комбинаторы-братья (поскольку текстовые вводы в стиль, похоже, всегда следуют за элементом label , а отправка следует за элементом textarea (но это довольно хрупко)):

Во-первых, это, наверное, глупый вопрос, но я новичок и все еще немного разбираюсь в CSS. Я пробую CakePHP и использую его помощник по форме для создания формы. Это звучит примерно так: <p><?php echo $this->Form->input(’email’);?></p> <?php echo.

Как стилизовать кнопку отправки формы? Это возможно или я должен использовать картинку (png)? Я имею в виду что-то вроде этого:

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

На самом деле, это тоже отлично работает.

При стилизации типа ввода используйте следующий код.

Это работает, я проверил.

Похожие вопросы:

Как мне стилизовать это (для полей ввода текста) с помощью CSS: Кроме того, какова правильная терминология для этой вещи?

Я хочу создать встречный круг, как показано ниже, я использую easy-pie-chart , но у меня нет ни малейшего представления о том, как стилизовать созданные круги, как показано ниже. Есть ли способ.

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

У меня есть проблема с стилизацией различных полей формы с помощью CSS У меня есть код CSS: #form input Теперь этот код.

Как мне стилизовать элемент управления членством asp.net с помощью css? Я хотел бы поместить разные классы на имя пользователя textbox, пароль textbox и кнопку входа.

Во-первых, это, наверное, глупый вопрос, но я новичок и все еще немного разбираюсь в CSS. Я пробую CakePHP и использую его помощник по форме для создания формы. Это звучит примерно так.

Как стилизовать кнопку отправки формы? Это возможно или я должен использовать картинку (png)? Я имею в виду что-то вроде этого:

Может ли кто-нибудь посоветовать CSS стили для кнопки ввода/отправки по умолчанию, пожалуйста? Мне нужно имитировать кнопку ввода/отправки по умолчанию с помощью css. Кнопка по умолчанию-это та.

CSS styling for input[type=&#39;date&#39;] for browsers other than Chrome

for firefox and microsoft edge? So far I cannot find any documentations / resources regarding to the styling of placeholder for <input type=’date’> . Any recommendations / answers is appreciated.

Tried the ::placeholder , ::-ms-input-placeholder and ::-moz-placeholder but they don’t work when the input type is date.

Alternatively I am happy to accept the answer if someone can tell me how to hide the default placeholder.

1 Answer 1

By using F12 developer tools to check the HTML and CSS, we can see that Chrome browser using user agent sytelsheet and these pseudo-elements (::-webkit) apply to chrome browser, but in Microsoft Edge browser, it’s not using user agent sytelsheet, and these pseudo-elements aren’t applied to the input date textbox. So, the code not working in Microsoft Edge.

So, I think you could try to use Microsoft Edge Dev version (chromium based), the code works well on it.

Otherwise, as a workaround, I suggest you could refer to the following code to use text box and datepicker plugin to display the date.

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

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