如何样式html5日期输入，第一个元素焦点/活动 [英] how to style html5 date input, first element focus/active

问题描述

我有一个已设定日期的输入，但无法移除蓝色高亮。

这是一支钢笔：

http://codepen.io/pjrundle/pen/PqjKBZ

 < input id =selectedDatetype =dateclass =date-filter pseudo-input live- placeholder =Event Date> 
 
 ::  -  webkit-inner-spin-button {
 display：none; 
} 
 ::  -  webkit-clear-button {
 display：none; 
 -webkit-appearance：none; 
} 
 ::  -  webkit-calendar-picker-indicator {
 opacity：0; 
 height：14px; 
 width：80px; 
 border：1px solid green; 
 z-index：2; 
 position：absolute; 
 left：9px; 
 top：8px; 
} 
  

所以当你点击输入时，第一个元素不应该变成蓝色。

解决方案

第一个元素变成蓝色，表示它是活动元素想要使用键盘更新日期），可以通过使用伪元素指定不应该有背景来对其进行设置：

  ::  -  webkit-datetime-edit-month-field 
 ::  -  webkit-datetime-edit-day-field 
 ::  -  webkit-datetime-edit-year-field 
 

注意：您不仅应该设置月份的样式，月/年），因为您不知道用户的计算机将具有哪个日期格式。代码如下：

  ::  -  webkit-datetime-edit-month-field {background：none; } 
 ::  -  webkit-datetime-edit-day-field {background：none; } 
 ::  -  webkit-datetime-edit-year-field {background：none; } 
  





---

您的示例如下所示： / p>

  ::  -  webkit-datetime-edit-month-field {background：none; } ::  -  webkit-datetime-edit-day-field {background：none; } ::  -  webkit-datetime-edit-year-field {background：none; } ::  -  webkit-inner-spin-button {display：none;} ::  -  webkit-clear-button {display：none; -webkit-appearance：none;} ::  -  webkit-calendar-picker-indicator {opacity：0; height：14px; width：80px; border：1px solid green; z-index：2; position：absolute; left：9px; top：8px;}  

 < input id =selectedDate type =dateclass =date-filter pseudo-input live-updateplaceholder =Event Date>  

检查这个问题列出所有可以使用的伪元素。

I have a date input that I've styled but I can't remove a blue highlight.

Here is a pen:

http://codepen.io/pjrundle/pen/PqjKBZ

<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">

::-webkit-inner-spin-button {
        display: none;
    }
    ::-webkit-clear-button {
        display: none;
        -webkit-appearance: none;
    }
    ::-webkit-calendar-picker-indicator {
        opacity: 0;
        height: 14px;
        width: 80px;
        border: 1px solid green;
        z-index: 2;
        position: absolute;
        left: 9px;
        top: 8px;
    }

so when you click on the input, the first element should not go blue. Does anyone know how to do this?

解决方案

The first element goes blue to indicate that it is the active element (in case you want to update the date using the keyboard), you can style it by specifying that it should not have a background using the pseudo-elements:

::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field

Notice: you should style not only the month, but all three elements (day/month/year) as you don't know which date format the user's computer will have. The code would be like this:

::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }

---

And your example would look like this:

::-webkit-datetime-edit-month-field { background: none; }
::-webkit-datetime-edit-day-field { background: none; }
::-webkit-datetime-edit-year-field { background: none; }

::-webkit-inner-spin-button {
  display: none;
}
::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
  opacity: 0;
  height: 14px;
  width: 80px;
  border: 1px solid green;
  z-index: 2;
  position: absolute;
  left: 9px;
  top: 8px;
}

<input id="selectedDate" type="date" class="date-filter pseudo-input live-update" placeholder="Event Date">

Check this question for a list of all the pseudo-elements that you can use.

这篇关于如何样式html5日期输入，第一个元素焦点/活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！