2
Meine Form wie dieses Ich habe es geschafftDer Pfeil in der Eingabetyp Datumsfeld verschwinden keinen gültigen Wert
blickt auf die Auswahl der -webkit-Kalender-Picker-Anzeigeknopf zum ursprünglichen Stil mit ein paar Webkit-Steuerelementen, und ich habe es geschafft, es auf das gesamte Datumsfeld zu bekommen. Jetzt möchte ich, dass, sobald ich ein Datum auswähle, die Breite dieses Kalenderauswahlindikatorknopfes auf 1% reduziert wird und die Deckkraft 0% wird.
Ich glaube, mit den richtigen Selektoren kann ich es möglich machen. Ich möchte es nur mit HTML und CSS tun.
Hier ist mein Code:
<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>