css - programacion - Cómo hacer: trabajo verificado en el navegador Android?

manual de programacion android pdf

Question

Estoy tratando de crear un formulario que tenga una lista de opciones predeterminadas, y que también se pueda expandir para mostrar un par de opciones de exta. Lo hago con el siguiente código CSS:

.myForm .moreOpts {display:none;}
.myForm #more:checked +*+ .moreOpts {display:block;}

con el siguiente HTML:

<form action="#" class="myForm">
  <ul>
    <li>
      <input type="checkbox" id="pref-1" name="pref-1" value="1">
      <label for="pref-1">Foo</label>
    </li>
    <li>
      <input type="checkbox" id="pref-2" name="pref-2" value="2">
      <label for="pref-2">Bar</label>
    </li>
    <li>
      <input type="checkbox" id="more" name="more" value="true">
      <label for="more">More options</label>
      <ul class="moreOpts">
        <li>
          <input type="checkbox" id="pref-3" name="pref-3" value="3">
          <label for="pref-3">Baz</label>
        </li>
        <li>
          <input type="checkbox" id="pref-4" name="pref-4" value="3">
          <label for="pref-4">Qux</label>
        </li>
      </ul>
    </li>
  </ul>
</form>

Manifestación

Este código funciona perfectamente en todos los navegadores, excepto para Android Browser y Dolphin . Encontré un artículo que recomienda agregar esta " corrección de errores ", pero eso solo soluciona mi problema en Dolphin.

¿Hay alguna manera de hacer que esto funcione también para el navegador Android predeterminado?

Answer 1

No confío :checked todos los navegadores. #more evento click de #more y simplemente agregaba una clase al padre. Es fácil con jQuery . Esta opción funcionará en Android e IE8.

$("#more").on("click", toggleCheckboxes);
var toggleCheckboxes = function(evt){
  var $this = $(this);
  $this.parents("li").toggleClass("show-more-options");
  evt.preventDefault()
}



.myForm .moreOpts {
  display:none;
}
.myForm .show-more-options .moreOpts {
  display:block;
}

:checked no es compatible con IE8, que lamentablemente sigue siendo un gran problema

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Answer 2

Puede lograr esto con la ayuda del elemento de details . Android lo admite desde la versión 4. Sin embargo, tendrá que lidiar con IE y Firefox, pero afortunadamente este navegador es compatible con los pseudo estados de CSS3, que incluyen :checked .

Dos fusionan estos dos, solo use el hack de casilla de verificación en navegadores que no admiten details . Aquí está el proceso explicado en el código: http://jsfiddle.net/hF6JP/1/

EDITAR: esta es la solución final, colocar la etiqueta dentro del resumen resuelve el problema de tener una casilla de verificación forzada para alternar las opciones: http://jsfiddle.net/mYdsT/

Answer 3

http://quirksmode.org/css/selectors/mobile.html#t60

:checked aparentemente no funciona en ninguna versión de Android. No estoy seguro de por qué tantas páginas web informan que debería funcionar (aparentemente desde 2.1), pero esto es falso.

Lo bueno de QuirksMode es que cada característica se prueba en un navegador real antes de publicarla en la web.

JavaScript parece ser su mejor solución. Incluso recomendaría javascript porque si un usuario marca el cuadro "más", selecciona algunas de las opciones adicionales y luego desmarca la casilla "más" ... las selecciones adicionales seguirán "marcadas" y se enviarán si el usuario pulsa el botón "enviar". Deberá desmarcar esos cuadros cada vez que se desactive la casilla "más". La única forma de hacerlo es con javascript.

ACTUALIZACIÓN: QuirksMode ha escrito una prueba defectuosa para el selector: :checked :

:checked {
    display: inline-block;
    width: 3em;
}

Notarás que en Android el ancho nunca cambia ... pero esto se debe al hecho de que Android no aplica un ancho a las casillas de verificación y radios (mientras que los navegadores de escritorio lo hacen).

Lo siguiente funciona, incluso en mi Android 2.3:

:checked {
    display: inline-block;
    margin: 3em;
}

Entonces, como se indicó en otros comentarios, el problema es con la combinación del selector verificado y el selector de hermanos adyacente:

:checked + .test { /* does not work on android :( */ }
:checked ~ .test { /* does not work on android :( */ }