1

Estoy intentando que el diseño que tengo sea lo mas fiel posible al de la imagen adjunta, pero no logro realizarlo, ya que no se como lograr que los dos iconos estén dentro de un recuadro alineados y que ocupen el mismo espacio del recuadro.

Diseño correcto

Mensaje

Diseño incorrecto

Incorrecto

Para el diseño estoy utilizando Bootstrap 4.4.1, CSS y FontAwesome

Por favor me pueden ayudar, gracias.

<style>
    .type_msg {
        border-top: 1px solid #c4c4c4;
        position: relative;
    }
    
    .input_msg_write input {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
        color: #4c4c4c;
        font-size: 15px;
        min-height: 48px;
        width: 100%;
      margin-left: 40px;
    }  
    
    .msg_img_btn {
        background: #b6b6b6 none repeat scroll 0 0;
        border: medium none;
        /*border-radius: 50%;*/
        color: #fff;
        cursor: pointer;
        font-size: 17px;
        height: 33px;
        position: absolute;
        left: 0;
        top: 11px;
        width: 33px;
    }
    
    .msg_send_btn {
        background: #3b3b3b none repeat scroll 0 0;
        border: medium none;
        /*border-radius: 50%;*/
        color: #fff;
        cursor: pointer;
        font-size: 17px;
        height: 33px;
        position: absolute;
        right: 0;
        top: 11px;
        width: 33px;
    }
    </style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="type_msg">
            <form class="input_msg_write" >
              <button class="msg_img_btn" type="button">
                <i class="fa fa-paperclip" aria-hidden="true"></i>
              </button>
              <input type="text" placeholder="Enviar mensaje..."/>
              <button class="msg_send_btn" type="button">
                <i class="fa fa-paper-plane" aria-hidden="true"></i>
              </button>
            </form>
          </div>

1 respuesta 1

1

Ya que estás usando Bootstrap, podrías usar los input group, que básicamente sirven para hacer algo similar a lo que quieres.

.msg_img_btn {
    background: #b6b6b6 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 17px;
    width: 33px;
}

.msg_send_btn {
    background: #3b3b3b none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    font-size: 17px;
    width: 33px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="msg_img_btn" type="button">
      <i class="fa fa-paperclip" aria-hidden="true"></i>
    </button>
  </div>
  <input type="text" class="form-control" placeholder="Enviar mensaje..."/>
  <div class="input-group-append">
    <button class="msg_send_btn" type="button">
      <i class="fa fa-paper-plane" aria-hidden="true"></i>
    </button>
  </div>
</div>

Referencia: Bootstrap 4 input group

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.