Cómo agregar un botón dentro de una entrada [closed]

7 minutos de lectura

Avatar de usuario de Vlad Otrocol
Vlad Otrocol

¿Cómo coloco visualmente un botón dentro de un elemento de entrada como se muestra a continuación?

entrada de contraseña

El usuario debería poder interactuar con la entrada normalmente. El texto no debe ir detrás del botón, incluso si es largo. El enfoque debería funcionar correctamente. El formulario debe ser accesible y funcionar correctamente en lectores de pantalla. Todo el componente debe poder diseñarse con CSS y debe poder redimensionarse fácilmente para adaptarse al espacio disponible.

¿Cómo logro esto con CSS moderno?

  • Deberías poder hacer esto con css, ¿qué has intentado?

    -Nick Pickering

    09/03/2013 a las 18:35

  • Esto podría ayudarte rápidamente: geeksforgeeks.org/…

    – Walzade Tushar

    17 mayo 2022 a las 14:57

El botón no está dentro de la entrada. Aquí:

input[type="text"] {
    width: 200px;
    height: 20px;
    padding-right: 50px;
}

input[type="submit"] {
    margin-left: -50px;
    height: 20px;
    width: 50px;
}

Ejemplo: http://jsfiddle.net/s5GVh/

  • Así es como lo hago, sin embargo, no puedo encontrar la manera de evitar que el texto se superponga al botón de enviar.

    – usuario1078385

    11/10/2013 a las 10:16

  • No debería suceder si usa el mismo ancho para padding-right y margin-left

    – Sol

    12/09/2014 a las 14:44

  • +1 para el relleno derecho en la entrada. Resuelve cualquier problema con los botones de borrado de entrada del navegador estándar (IE10, iOS, etc.) que se superponen con el botón de búsqueda.

    –Liam Grey

    11/09/2015 a las 13:25

  • Esto no responde la pregunta. La pregunta es cómo ponerlo dentro de la entrada. Vine aquí buscando una manera de tenerlo dentro y alternando la visibilidad del botón según el cambio de valor.

    – Johan Tiden

    20 de octubre de 2016 a las 8:19

  • @JohanTidén Sí responde la pregunta. Para un usuario, el botón está dentro del campo. Por supuesto, debido a que somos codificadores, podemos decir que no está realmente dentro… pero ese no es el punto. El punto es presentar al usuario una experiencia agradable.

    – Sami Fouad

    5 de febrero de 2017 a las 13:20

avatar de usuario de superluminary
superluminaria

Use un Flexbox y coloque el borde en el formulario.

La mejor manera de hacer esto ahora (2022) es con un flexbox.

  • Coloque el borde en el elemento contenedor (en este caso, he usado el formulario, pero podría usar un div).
  • Use un diseño de caja flexible para organizar la entrada y el botón uno al lado del otro. Permita que la entrada se estire para ocupar todo el espacio disponible.
  • Ahora oculte la entrada eliminando su borde.

Ejecute el fragmento a continuación para ver lo que obtiene.

form {
  /* This bit sets up the horizontal layout */
  display:flex;
  flex-direction:row;
  
  /* This bit draws the box around it */
  border:1px solid grey;

  /* I've used padding so you can see the edges of the elements. */
  padding:1px;
}

input {
  /* Tell the input to use all the available space */
  flex-grow:2;
  /* And hide the input's outline, so the form looks like the outline */
  border:none;
}

/* remove the input focus blue box, it will be in the wrong place. */
input:focus {
  outline: none;
}

/* Add the focus effect to the form so it contains the button */
form:focus-within { 
  outline: 1px solid blue 
}

button {
  /* Just a little styling to make it pretty */
  border:1px solid blue;
  background:blue;
  color:white;
}
<form>
  <input />
  <button>Go</button>
</form>

porque esto es bueno

  • Se estirará a cualquier ancho.
  • El botón siempre será tan grande como debe ser. No se estirará si la pantalla es ancha ni se encogerá si la pantalla es estrecha.
  • El texto de entrada no irá detrás del botón.

Advertencias y soporte del navegador

Hay compatibilidad limitada con Flexbox en IE9, por lo que el botón no estará a la derecha del formulario. IE9 no ha sido compatible con Microsoft desde hace algunos años, por lo que personalmente me siento bastante cómodo con esto.

He usado un estilo mínimo aquí. Lo he dejado en el relleno para mostrar los bordes de las cosas. Obviamente, puede hacer que este se vea como quiera que se vea con esquinas redondeadas, sombras paralelas, etc.

  • ¿Qué le indica al botón que se alinee a la derecha?

    – Christiaan Westerbeek

    1 de noviembre de 2018 a las 9:48

  • @Neowizard Debería preguntarle al OP agregando un comentario a su pregunta. También puede rechazar la respuesta aceptada (como una contribución menor para aclarar las cosas)

    – Christiaan Westerbeek

    1 de noviembre de 2018 a las 9:51

  • Esta solución no mostrará un borde azul en el foco alrededor del elemento exterior. Vea aquí cómo lograrlo: stackoverflow.com/questions/38644773/…

    – Roy Prins

    16 de agosto de 2019 a las 12:18

  • @RoyPrins: buen punto. Utilizando el :focus-within pseudoclase en el formulario le permitiría restablecer el cuadro de enfoque azul si así lo desea.

    – superluminaria

    27 de agosto de 2019 a las 10:54

  • Por favor, evite ediciones superfluas.

    – TylerH

    30 de enero de 2020 a las 13:50

Avatar de usuario de Lars-Lasse
Lars-Lasse

.flexContainer {
    display: flex;
}

.inputField {
    flex: 1;
}
<div class="flexContainer">
    <input type="password" class="inputField">
    <button type="submit"><img src="https://stackoverflow.com/questions/15314407/arrow.png" alt="Arrow Icon"></button>
</div>

Avatar de usuario de Sahil Popli
Sahil Popli

Encontré un gran código para ti:

HTML

<form class="form-wrapper cf">
    <input type="text" placeholder="Search here..." required>
    <button type="submit">Search</button>
</form>

CSS

/*Clearing Floats*/
.cf:before, .cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

.cf {
    zoom:1;
}    
/* Form wrapper styling */
.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 150px auto 50px auto;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

/* Form text input */

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;   
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;     
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   

/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;     
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  

.form-wrapper button:hover {    
    background: #e54040;
}  

.form-wrapper button:active,
.form-wrapper button:focus {  
    background: #c42f2f;
    outline: 0;  
}

.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before {
    border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before {
        border-right-color: #c42f2f;
}     

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}    

Manifestación: en violín
Fuente: niño mocoso

Avatar de usuario de Brennan James
brennan james

Esta es la forma más limpia de hacerlo en arranque v3.

<div class="form-group">
    <div class="input-group">
        <input type="text" name="search" class="form-control" placeholder="Search">
        <span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
     </div>
</div>

avatar de usuario de van
camioneta

Esto se puede lograr usando bloques en línea
JS violín aquí

<html>
<body class="body">
    <div class="form">
        <form class="email-form">
            <input type="text" class="input">
            <a href="#" class="button">Button</a>
        </form>
    </div>
</body>
</html>


<style>
* {
    box-sizing: border-box;
}

.body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}

.form {
    display: block;
    margin: 0 0 15px;
}

.email-form {
    display: block;
    margin-top: 20px;
    margin-left: 20px;
}

.button {
    height: 40px;
    display: inline-block;
    padding: 9px 15px;
    background-color: grey;
    color: white;
    border: 0;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

.input {
    display: inline-block;
    width: 200px;
    height: 40px;
    margin-bottom: 0px;
    padding: 9px 12px;
    color: #333333;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    margin: 0;
    line-height: 1.42857143;
}
</style>

¿Ha sido útil esta solución?