2
私のフォームは、私は-webkit-カレンダーピッカー・インジケータボタンのスタイルを設定するために管理してきたこの入力タイプの日付フィールドの矢印が有効な値を選択するには消えない
のように見えますいくつかのWebkitコントロールを使用して、私はそれを日付フィールド全体で取得することができました。今度は、日付を選択するとすぐに、このカレンダー・ピッカー・インジケーター・ボタンの幅が1％に減り、不透明度が0％になります。
私は正しいセレクタを使用することで可能になると思います。私はhtmlとcssだけを使用してそれをしたいです。
<html>
<head>
<style>
body{
margin: 0;
}
.formshadow{
position: relative;
color: white;
margin:0 auto;
background-color: #242424;
height: 600px;
width: 600px;
}
.form{
color:#242424;
position: absolute;
margin: 20px 0 0 20px;
padding:0;
width: 600px;
height: 600px;
background-color: #9BE1EE;
font-weight: bold;
font-family:"Segoe UI Light";
}
.formborder{
position:relative;
width: 530px;
height: 530px;
margin:32px auto;
border:3px #242424 solid;
}
.formborder h1{
display: block;
font-size: 2em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
#dob::-webkit-inner-spin-button,
#mobile::-webkit-inner-spin-button{
display:none;
-webkit-appearance:none;
}
#dob::-webkit-calendar-picker-indicator{
width:100%;
height:42px;
opacity:1;
margin-left:-20px;
background-color:red;
}
#forminput{
margin-left:60px;
display:inline-block;
position:relative;
width:173px;
}
.form label{
position: absolute;
left:0;
top:10;
font-size: 20px;
}
.form input{
position:relative;
line-height:50px;
font-size:25px;
background-color:transparent;
border:none;
border-bottom:1px #242424 solid;
margin-bottom:8px;
}
input[type=number],input[type=date]{
width:184px;
}
input:hover + label{
position: absolute;
left:0;
top:0;
font-size: 12px;
transition:ease-in 0.2s;
}
input:focus + label{
position: absolute;
left:0;
top:0;
font-size: 12px;
transition:ease-in 0.2s;
}
input:valid + label{
position: absolute;
left:0;
top:0;
font-size: 12px;
transition:ease-in 0.2s;
}
</style>
</head>
<body>
<div class="formshadow">
<div class="form">
<div class="formborder">
<center><h1>Registeration</h1></center>
<form>
<div id="forminput"><input required type="text" name="fname" id="fname" size="10"/><label for="fname">First Name:</label></div>
<div id="forminput"><input required type="text" name="lname" id="lname" size="10"/><label for="lname">Last Name:</label></div><br />
<div id="forminput"><input required type="text" name="city" id="city" size="10"/><label for="city">City:</label></div>
<div id="forminput"><input required type="text" name="state" id="state" size="10"/><label for="state">State:</label></div><br />
<div id="forminput"><input required type="text" name="college" id="college" size="10"/><label for="college">College:</label></div>
<div id="forminput"><input required type="text" name="id" id="id" size="10"/><label for="id">ID:</label></div><br />
<div id="forminput"><input required type="number" name="mobile" id="mobile" size="10"/><label for="mobile">Mobile:</label></div>
<div id="forminput"><input required type="email" name="email" id="email" size="10"/><label for="email">Email:</label></div><br />
<div id="forminput"><input required type="date" name="dob" id="dob" size="10"/><label for="dob">Date of Birth:</label></div>
<div id="forminput"><input required type="text" name="occupation" id="occupation" size="10"/><label for="occupation">Occupation:</label></div><br />
</form>
</div>
</div>
</div>
</body>
</html>