me gustaría saber por qué no se adapta bien mi input submit dentro del input text (el formulario), estoy usando en la propia etiqueta form el position relative y en el input submit position absolute (el cuadrado más grisáceo que tiene un icono de una lupa pero que como comprenderéis no es visible). La cosa es que con un right 0; y top 0; el botón del submit debería adaptarse justo a la derecha y totalmente dentro del propio input de texto, y no es el caso, lo puedo solucionar poniendo el valor de right: -8px; pero creo que no es lo correcto y que de la forma en que os muestro mi código debería de funcionar bien.
He probado a poner el selector del formulario de distintas formas, de igual manera con los inputs, por si tendría algo que ver pero no es el caso. ¿Alguna ayudita? Un saludo .
.hero .contenido-hero form {
position: relative;
width: 40%;
}
.hero .contenido-hero form input[type="submit"] {
position: absolute;
right: 0;
top: 0;
background-image: url("../img/lupa.png");
background-repeat: no-repeat;
background-position: center center;
width: 3rem;
height: 3rem;
display: block;
text-indent: -9999px;
border: none;
cursor: pointer;
}
.hero .contenido-hero form input[type="text"] {
width: 100%;
height: 3rem;
}
<div class="hero">
<div class="contenido-hero contenedor">
<h2>Aprende algo nuevo</h2>
<p>Pruebas</p>
<form action="#" id="busqueda" method="post" class="formulario">
<input class="" type="text" placeholder="¿Que te gustaría Aprender?" id="buscador">
<input type="submit" id="submit-buscador" class="submit-buscador">
</form>
</div>
</div> <!--#hero-->