Question

我正在尝试自定义标准的web-kit input type =“date”元素。我试图删除或指定新的正确样式：在元素之前，它会消失或变得不可见。

我只是想让“选择日期”文字消失，并在用户点击它时在控制字段中显示原生日期选择器输出。

提前致谢！

$(document).ready(function(){
    $("input[type=date]").click(function(){
        $("input[type=date]::-webkit-calendar-picker-indicator:before").css("display", "none");
    })    
})

input[type=date] {
	height: 46px;
	width: 196px;
	font-size: 16pt;
	/*text-transform: uppercase;*/
	background-color: #f1f5f8;
	border: 2px solid #d7d6d5;
    border-radius: 8px;
	color: #555555;
	padding: 0 15px;
}

input::-webkit-inner-spin-button { display: none;}

input[type=date]::-webkit-calendar-picker-indicator {
  color: #555555;
  opacity: 1;
  position: relative;
}

input[type=date]::-webkit-calendar-picker-indicator:after {
  content: "\e906";
  font-family: 'icomoon';
  font-size: 26px;
  background: #f1f5f8;
  width: 44px; height: 24px;
  text-align: right;
  left: -10px; top: -4px;
  position: absolute;
}

input[type=date]::-webkit-calendar-picker-indicator:before{
    content: "Select date";
    width: 160px; height: 30px;
    left: -180px; top: -5px;
    background: red;
    position: absolute;
    text-align: left;
}

input[type=date]::-webkit-calendar-picker-indicator:before hidden{
    background: green;
}

input[type=date]::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="datepic" name="depart" placeholder="Select date">

Answer 1

简短的回答是不！

无法通过javascript访问伪选择器:before。

但是解决方法是在js / jQuery中添加一个类名，并使用:before选择器将其隐藏在css中：

在css中你可以这样做：

input[type=date].addedDate::-webkit-calendar-picker-indicator:before{
   display:none;
}

并在js / jQuery中：

$("input[type=date]").click(function(){
    $("input[type=date]").addClass("addedDate");
})

$(document).ready(function(){
    $("input[type=date]").click(function(){
        $("input[type=date]").addClass("addedDate");
    })    
})

input[type=date] {
	height: 46px;
	width: 196px;
	font-size: 16pt;
	/*text-transform: uppercase;*/
	background-color: #f1f5f8;
	border: 2px solid #d7d6d5;
    border-radius: 8px;
	color: #555555;
	padding: 0 15px;
}



input::-webkit-inner-spin-button { display: none;}

input[type=date]::-webkit-calendar-picker-indicator {
  color: #555555;
  opacity: 1;
  position: relative;
}

input[type=date]::-webkit-calendar-picker-indicator:after {
  content: "\e906";
  font-family: 'icomoon';
  font-size: 26px;
  background: #f1f5f8;
  width: 44px; height: 24px;
  text-align: right;
  left: -10px; top: -4px;
  position: absolute;
}

input[type=date]::-webkit-calendar-picker-indicator:before{
    content: "Select date";
    width: 160px; height: 30px;
    left: -180px; top: -5px;
    background: red;
    position: absolute;
    text-align: left;
}

input[type=date]::-webkit-calendar-picker-indicator:before hidden{
    background: green;
}

input[type=date]::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}

input[type=date].addedDate::-webkit-calendar-picker-indicator:before{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="datepic" name="depart" placeholder="Select date">

删除：在CSS元素之前或之后：使用Jquery

1 个答案: