Cómo aplicar estilo a los botones de entrada de archivos del formulario de contacto 7

7 minutos de lectura

avatar de usuario
reece

Parece que no puedo apuntar al botón para cargar un archivo dentro del formulario de contacto 7. ¿Cómo puedo apuntar al botón de elegir archivo para poder agregar un color de fondo, etc. Oh, también estoy haciendo esto en WordPress en caso de que necesite saber que. Entonces, en el backend se ve así;

<label class="form_label"> Your Name<span>*</span>
[text* your-name]</label>

<label class="form_label"> Your Email<span>*</span>
[email* your-email]</label>

<label class="form_label">Tel
[tel tel]</label>

<label class="form_label">CV<span>*</span>
[file cv id:upload]</label>

<label class="form_label">Cover Letter
[textarea your-message]</label>

[submit "Send"]

Mi salida html se ve a continuación.

<div role="form" class="wpcf7" id="wpcf7-f47-o1" lang="en-US" dir="ltr">
  <div class="screen-reader-response"></div>
  <form action="/Lester_Goddard_New/#wpcf7-f47-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
    <div style="display: none;">
      <input type="hidden" name="_wpcf7" value="47" />
      <input type="hidden" name="_wpcf7_version" value="4.9" />
      <input type="hidden" name="_wpcf7_locale" value="en_US" />
      <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-o1" />
      <input type="hidden" name="_wpcf7_container_post" value="0" />
    </div>
    <p><label class="form_label"> Your Name<span>*</span><br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></label></p>
    <p><label class="form_label"> Your Email<span>*</span><br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span></label></p>
    <p><label class="form_label">Tel<br />
<span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></label></p>
    <p><label class="form_label">CV<span>*</span><br />
<span class="wpcf7-form-control-wrap cv"><input type="file" name="cv" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span></label></p>
    <p><label class="form_label">Cover Letter<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span></label></p>
    <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div>
  </form>
</div>

  • Ya intenté ponerle un id y no funcionó

    – Reece

    25 de octubre de 2017 a las 9:34

  • He probado esto. No puedo apuntar solo al botón. Si crees que es posible, ¿puedes por favor mostrármelo? Gracias

    – Reece

    25 de octubre de 2017 a las 9:41

  • Si, solo el boton. Este es el problema que he estado teniendo. Gracias por tu ayuda

    – Reece

    25 de octubre de 2017 a las 9:48

avatar de usuario
liliam

tuve que cambiar visibility:hidden;
por opacity:0;

de acuerdo a https://www.quirksmode.org/dom/inputfile.html por lo tanto, el botón continúa funcionando; de lo contrario, el clic no provocó la exploración.

  • No estoy seguro de por qué esto fue rechazado, ya que es realmente correcto. La respuesta aceptada es realmente incorrecta/mala sin esta información añadida, ya que impide que el botón funcione.

    – Desarrollo web híbrido

    6 de abril de 2019 a las 22:23


  • @Hybridwebdev, la respuesta aceptada no es incorrecta y no necesitamos cambiar la visibilidad con opacidad porque tenemos la etiqueta que recibe el evento de clic. En realidad, la solución provista en el enlace aquí es malo porque usa un div, por lo tanto, todavía necesitamos el evento de clic en una entrada invisible que no es el caso de la respuesta aceptada (PD: no edite la respuesta para cambiar su significado, incluso si cree que está mal. Comenta o agrega una nueva respuesta ). Incluso display:none funcionará con la respuesta aceptada.

    – Temani Afif

    6 de abril de 2019 a las 22:48


  • No. No funciona. Lo sé, ya que encontré esta respuesta cuando yo mismo estaba buscando implementar una entrada de archivo con estilo. Su respuesta fue incorrecta ya que el evento de clic para la entrada del archivo nunca se disparó. Fue solo cuando lo cambié a opacidad que funcionó. Creo que esto se debe a que si la entrada está oculta, los eventos de clic no pasan. Creo que no probó esto a fondo, o vería por qué no funciona. Que hayas eliminado mi edición solo demuestra que no puedes aceptar las críticas. Hágales un favor a los futuros lectores, tráguese su orgullo y edite su respuesta para reflejar la solución correcta.

    – Desarrollo web híbrido

    8 de abril de 2019 a las 0:07


avatar de usuario
Temani Afif

No puede diseñar el botón de carga de archivos como cualquier botón, en su lugar, puede usar un pseudo elemento para cubrir el botón y aplicarle estilo. Puedes intentar algo como esto. Puede cambiar el contenido y el estilo del botón “nuevo” como desee:

span.cv {
  position:relative;
}
span.cv:before {
  content:"Upload file";
  position:absolute;
  left:0;
  padding:5px;
  background:red;
  color:#fff;
  width:130px;
  text-align:center;
  border-radius:5px;
  cursor:pointer;
}
span.cv>input {
  visibility:hidden;
}
<div role="form" class="wpcf7" id="wpcf7-f47-o1" lang="en-US" dir="ltr">
  <div class="screen-reader-response"></div>
  <form action="/Lester_Goddard_New/#wpcf7-f47-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
    <div style="display: none;">
      <input type="hidden" name="_wpcf7" value="47" />
      <input type="hidden" name="_wpcf7_version" value="4.9" />
      <input type="hidden" name="_wpcf7_locale" value="en_US" />
      <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-o1" />
      <input type="hidden" name="_wpcf7_container_post" value="0" />
    </div>
    <p><label class="form_label"> Your Name<span>*</span><br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></label></p>
    <p><label class="form_label"> Your Email<span>*</span><br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span></label></p>
    <p><label class="form_label">Tel<br />
<span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></label></p>
    <p><label class="form_label">CV<span>*</span><br />
<span class="wpcf7-form-control-wrap cv"><input type="file" name="cv" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span></label></p>
    <p><label class="form_label">Cover Letter<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span></label></p>
    <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div>
  </form>
</div>

  • Agregar visibility: hidden a <input type="file"> para ocultar el elemento original detrás, que puede ser más ancho que el botón superpuesto.

    – bajo

    13 de abril de 2018 a las 13:48

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad