Skip to main content
Recompensa finalizada con 200 de reputación otorgada por gemita
se añadieron 2513 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Update

Extrañamente colocar el icono al lado del label es más complicado, pero la lógica es casí la misma

/* SOLO PARA LA DEMO NO COPIAR ESTO */
input{
  height:32px;
  width:100%;
  display:block;
}
label {
  width:100%;
  padding:10px 0;
  display:block;
}

/* ====================================== */



p.form-row:has(>label[for="billing_phone"]) {
 position:relative;

}

p.form-row:has(>label[for="billing_phone"]):after{
width: 22px;
    height: 22px;
    top: 8px;
    left: 79px;
    border-radius: 50%;
    background-color: #927124;
    content: "?";
    color: #F1EAD6;
    display: block;
    position: absolute;
    display: grid;
    justify-content: center;
    align-items: center;
    font-weight: 900;
}


p.form-row:has(>label[for="billing_phone"]):before{
  display: block;
  content: " El número de teléfono lo necesitamos por si tuviéramos problemas con el pedido";
  visibility: collapse;
  width: 120px;
  background-color: rgb(93, 69, 4);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 10px;
  font-size:0.9em;
  position: absolute;
  z-index: 9990;
  left: 99px;
  top: -13px;
  box-shadow: 0 5px 10px rgb(93, 69, 4);
}

p.form-row:has(label[for="billing_phone"]):hover:before{
  visibility: visible;
}
p.form-row:has(label[for="billing_phone"]:hover, span:hover):before{
  visibility: collapse;
}
<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_phone" class>
   Teléfono
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>

 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>


<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_otrocampo" class>
   Otro campo
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>

 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>

Update

Extrañamente colocar el icono al lado del label es más complicado, pero la lógica es casí la misma

/* SOLO PARA LA DEMO NO COPIAR ESTO */
input{
  height:32px;
  width:100%;
  display:block;
}
label {
  width:100%;
  padding:10px 0;
  display:block;
}

/* ====================================== */



p.form-row:has(>label[for="billing_phone"]) {
 position:relative;

}

p.form-row:has(>label[for="billing_phone"]):after{
width: 22px;
    height: 22px;
    top: 8px;
    left: 79px;
    border-radius: 50%;
    background-color: #927124;
    content: "?";
    color: #F1EAD6;
    display: block;
    position: absolute;
    display: grid;
    justify-content: center;
    align-items: center;
    font-weight: 900;
}


p.form-row:has(>label[for="billing_phone"]):before{
  display: block;
  content: " El número de teléfono lo necesitamos por si tuviéramos problemas con el pedido";
  visibility: collapse;
  width: 120px;
  background-color: rgb(93, 69, 4);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 10px;
  font-size:0.9em;
  position: absolute;
  z-index: 9990;
  left: 99px;
  top: -13px;
  box-shadow: 0 5px 10px rgb(93, 69, 4);
}

p.form-row:has(label[for="billing_phone"]):hover:before{
  visibility: visible;
}
p.form-row:has(label[for="billing_phone"]:hover, span:hover):before{
  visibility: collapse;
}
<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_phone" class>
   Teléfono
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>

 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>


<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_otrocampo" class>
   Otro campo
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>

 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>

Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Aquí una solución basada solo en CSS

/* SOLO PARA LA DEMO NO COPIAR ESTO */
input{
  height:32px;
}
/* ====================================== */



label[for="billing_phone"] + span {
 position:relative;
}

label[for="billing_phone"] + span > input.input-text {
 padding-right:34px;
}

label[for="billing_phone"] + span:before{
  width: 24px;
  height: 24px;
  top: -2px;
  right: 8px;
  
  content: "";
   display: block;
  background: url("https://i.postimg.cc/ryJxTmp6/marron-Interro.png") no-repeat 0 0;
  background-size: 100%;
  position:absolute;
}


label[for="billing_phone"] + span:after{
  display: block;
  content: " El número de teléfono lo necesitamos por si tuviéramos problemas con el pedido";
  visibility: hidden;
  width: 120px;
  background-color: rgb(93, 69, 4);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 10px;
  font-size:0.9em;
  position: absolute;
  z-index: 9990;
  right:2px;
  top:8px;
  box-shadow: 0 5px 10px rgb(93, 69, 4);
}

label[for="billing_phone"] + span:hover:has(>input:not(:hover)):after{
   visibility: visible;
}
<p class="form-row form-row-wide validate-requerid- valida-phone">
 <label for="billing_phone" class>
   Teléfono
   <abbr class="requerid" title="obligatorio">*</abbr>
 </label>
 
 <span class="woocommerce-input-wrapper">
   <input type="tel" class="input-text" >
 </span>
 <strong></strong>
</p>

Seguramente vas a tener que ajustar un poco los elementos, para que calecen en las dimensiones de tu template, esto son los elementos importantes

Dimensión y posición del icono:

label[for="billing_phone"] + span:before{
  width: 24px; /* Ancho */
  height: 24px;/* Alto*/
  top: -2px;   /* Posición */
  right: 8px;  /* Posición*/
//etc

Esto da un margen a la derecha del input. Es para que cuando escribas un texto dentro no se cruce con el icono que está dentro. Si cambias el tamaño del icono, posiblemente tengas que ajustar un poco este valor

label[for="billing_phone"] + span > input.input-text {
 padding-right:34px;
}