I have these styles for an input type='date'
, but I can't get the controls to display the calendar to be free. I can manually enter dates with the number pad but I don't want to lose the calendar option.
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
height: 3.125rem;
padding: .75rem;
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
/* pointer-events: none; */
cursor: text; /* Match the input under the label */
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: 1.25rem;
padding-bottom: .25rem;
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
.form-label-group > label {
display: none;
}
.form-label-group input::-ms-input-placeholder {
color: #777;
}
}
/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.form-label-group > label {
display: none;
}
.form-label-group input:-ms-input-placeholder {
color: #777;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="form-label-group m-5">
<input
id='id1'
type="Date"
class="form-control invalid"
placeholder="Texto"
/>
<label for="id1">
<span class="d-flex justify-content-between">
Ingresa defecha
</span>
</label>
</div>
Update
@Jacobo 's response to the problem gives a partial solution by reducing the size, but in the event that I add one more text element to the label so that it is displayed on the right, it will not appear to the edge (as it may be a link). How to prevent this? I have changed the reduction vertically and this is the result.
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
height: 3.125rem;
padding: .75rem;
}
.form-label-group > label {
background-color: red;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 25%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
/* pointer-events: none; */
cursor: text; /* Match the input under the label */
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: 1.25rem;
padding-bottom: .25rem;
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
.form-label-group > label {
display: none;
}
.form-label-group input::-ms-input-placeholder {
color: #777;
}
}
/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.form-label-group > label {
display: none;
}
.form-label-group input:-ms-input-placeholder {
color: #777;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="form-label-group m-5">
<input
id='id1'
type="Date"
class="form-control invalid"
placeholder="Texto"
/>
<label for="id1">
<span class="d-flex justify-content-between">
Ingresa defecha
<a href='alert('Se muestra')'>Mostrar alerta</a>
</span>
</label>
</div>
In your code just change the size of your label
width: 85%;
and that's itcreate some
div
and add the classclass="p-2"
to them so that I keep the div alignedalso change the class
justify-content-between
tojustify-content-start
I hope it helps you.
Taking into account the changes to the question I have deleted what I had. You can use the auto option for height, and the browser will calculate the height.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/height
well what do you think if we do what you want but with bootstrap utilities
look at this example and the best thing is that you don't need to customize so many styles :)
remove your styles and only put the necessary ones inline, the rest are bootstrap styles