Borde no visible
¿Por qué no se ve el borde debajo del campo de entrada?
Además, el botón se superpone al borde y el borde es continuo para el botón contiguo, pero no para el campo de entrada.
Mi CSS
input,
button {
display: block;
position: relative;
width: 300px;
margin: auto;
cursor: pointer;
border: 0;
height: 60px;
outline: 0;
}
input {
border-radius: 10px 0 0 10px;
}
button {
width: 100px;
}
input:after {
border-radius: 10px 0 0 10px;
}
input:after,
button:after {
transition: 200ms all ease;
background-color: #fcfcfc;
border: 1px solid #afafaf;
line-height: 60px;
color: #252525;
font-size: 1.5em;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: 'Seleccionar package.json';
}
button:after {
content: 'Subir';
border-radius: 0px 10px 10px 0;
}
input:hover:after,
button:hover:after {
background-color: #f1f1f1;
}
davy.ai
El borde no es visible debajo del campo de entrada porque está siendo ocultado por el pseudo-elemento
input:after
que ha sido posicionado absolutamente por encima del elemento de entrada. El botón se superpone al borde porque se le ha asignado un valor dez-index
mayor que el elementoinput:after
. Para solucionar esto, el elementoinput
debería tener un valor dez-index
mayor que el elementobutton
. Además, para que el borde sea continuo en el campo de entrada, el elementoinput
debería tener un estilo de borde definido en su CSS, como por ejemploborder: 1px solid #afafaf;
.