1

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-->

2 respuestas 2

1

El comportamiento de position: relative con position: absolute te está funcionando correctamente. Si usas el inspector de elementos de las herramientas de desarrollador del navegador podrás ver que el <input type="submit"> se posiciona donde debería respecto al <form>. El problema lo tienes en otro lado, más concretamente en el <input type="text">.

Este está sobrepasando las medidas permitidas por su padre (el <form>). Este input tiene un padding y un border que al decirle que tenga el 100% del tamaño de su padre termina desbordando. Para solucionarlo puedes decir que el <input type="text"> use a propiedad box-sizing: border-box para que el border y el padding no se sumen al 100% del width, si no que estén contenidos por este.

.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;
  box-sizing: border-box;
}
<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-->

1
  • Pues correcto! Muchísimas gracias, yo había descartado el box-sizing: border-box porque en mi CSS arriba del documento que no lo he adjuntado, tenía puesto el selector html{ box-sizing: border-box} y pensaba que con eso ya no tenía que preocuparme del resto de elementos, pero veo que no, que era necesario ponerlo. Commented el 3 abr. 2021 a las 0:42
0

HOLA intenta con esto!

.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;
  }

2
  • Por favor lee Cómo responder
    – user128299
    Commented el 2 abr. 2021 a las 23:29
  • Hola, no, no soluciona el problema, y sigo sin encontrarle la lógica al tema. Commented el 3 abr. 2021 a las 0:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.