New question

Question:

Date: 29-10-2015 11:30:07 (In Spanish)

CSS - FIREFOX[Resolved]

Buenas tardes comunidad:

Tengo inconvenientes al personalizar los:

Check box
Radio Button

Solo cuando utilizo como navegador Firefox
¿Alguien tiene alguna sugerencia CSS?
Desde ya muchas gracias
Daniel
Tags: CSS - Firefox - HTML - Question Votes: 0 - Answers: 15 - Views: 11 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 29-10-2015 11:50:28 Hola daniel

    a que te refieres con esto
    personalizar los:

    Check box
    Radio Button

    que quieres personalizar ?
      Votes: 0 - Link answer
     
  • Date: 29-10-2015 12:24:35 Juan

    Por medio de CSS uno le puede dar una forma distinta la Standat que te dan por defalut los navegadores ... El tema es que al aplicar CSS, Firefox no me esta tomando el formato y si el resto

    Gracias por responder
    DC
      Votes: 0 - Link answer
     
  • Date: 29-10-2015 14:05:30 daniel forma como que , te refieres a border
    algo asi?
      Votes: 0 - Link answer
     
  • Date: 29-10-2015 14:38:34 Hola Daniel
    A ver si te refieres a esto, de dejo unos links

    1- iCheck
    2- Customize Checkboxes and Radio Buttons with CSS3
    3- Quick Tip: Easy CSS3 Checkboxes and Radio Buttons
    4- csscheckbox
    5- Awesome Bootstrap Checkbox Demos Checkboxes & Radios

    saludos
      Votes: 0 - Link answer
     
  • Date: 29-10-2015 14:43:36 Juan

    CSS - formato - imaginate en lugar de cuadrado rectangular / redondo / trinagular ...
    style="background-color:#99CCFF; color:#FFFFFF; width:10px; heiht:10px;"
    Lo que se te ocurra
    En Chorome, Opera, Explorer ... funciona en Firefox no
    No se si es un error o Firefox tiene una particularidad

    DC
      Votes: 0 - Link answer
     
  • Date: 29-10-2015 14:56:00 Buenas noches comparñeros dejo esto por aca espero sirva de ayuda
    Enlace CodePen con ejemplo de checkbox y radio
    <div class="custom-check"> 
      <input id="check" checked="checked" type="checkbox">
      <label for="check">Check Label</label>
    </div>
    <hr>
    <div class="custom-radio">
      <input name="radio" id="radio1" checked="checked" type="radio">
      <label for="radio1">Radio Label 1</label>
    </div>
    <div class="custom-radio">
      <input name="radio" id="radio2" type="radio">
      <label for="radio2">Radio Label 2</label>
    </div>
    <div class="custom-radio">
      <input name="radio" id="radio3" type="radio">
      <label for="radio3">Radio Label 3</label>
    </div>
    

    * {
      padding: 0;
      margin: 0;
    }
    
    .custom-check {
      margin: 1em;
    }
    .custom-check input[type="checkbox"] {
      display: none;
    }
    .custom-check label {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }
    .custom-check label:before {
      content: "";
      text-align: center;
      line-height: 16px;
      font-weight: bold;
      border: 1px solid orange;
      border-radius: 5px;
      width: 16px;
      height: 16px;
      padding: 2px;
      margin: 0 0.5em 0 0;
    }
    .custom-check input[type="checkbox"]:checked + label:before {
      background: orange;
      color: white;
      content: "?";
    }
    
    .custom-radio {
      margin: 1em;
    }
    .custom-radio input[type="radio"] {
      display: none;
    }
    .custom-radio label {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }
    .custom-radio label:before {
      content: "";
      text-align: center;
      line-height: 16px;
      font-weight: bold;
      font-size: 2em;
      border: 1px solid steelblue;
      border-radius: 50%;
      padding: 2px;
      width: 16px;
      height: 16px;
      margin: 0 0.5em 0 0;
    }
    .custom-radio input[type="radio"]:checked + label:before {
      background: steelblue;
      color: white;
      content: "•";
    }
    
    
      Votes: 1 - Link answer
     
  • Date: 29-10-2015 18:28:46 Daniel el código q compartiste veo q tu propiedad height
    Esta mal escrito en tu caso esta con heiht ten cuidado con eso
      Votes: 0 - Link answer
     
  • Date: 29-10-2015 18:29:52 En todo caso aver comparte tu css para el checkbox   Votes: 0 - Link answer
     
  • Date: 30-10-2015 08:26:36 Daniel, Juan tiene razón, está muy abierta tu pregunta.
    Si la acotas un poco más te podemos ayudar mejor.

    Saludos!
      Votes: 0 - Link answer
     
  • Date: 30-10-2015 10:04:08 Bueno aqui va mi ejemplo que funciona en CHOROME y OPERA, pero no en FIREFOX y EXPLORER (Este ultimo no me extraña)

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    input[type="checkbox"]{
    	-webkit-appearance: none;
    	-ms-appearance: none;
    	-o-,-xv-appearance: none;					
    	-moz-appearance: none;
    	border:2px solid #FF0000;
    	width: 15px;
    	height: 15px;
    	-webkit-border-radius:2px;
    	-ms-border-radius:2px;
    	-o-,-xv-border-radius:2px;
    	-moz-border-radius:2px;
    	outline-style:none;
        }
        
        input:checked{
        background-color:#0000FF;
    
        }     
        input:[type="radio"]{
    	-webkit-border-radius:7px;
        -ms-border-radius:7px;
    	-o-,-xv-border-radius:7px;
    	-moz-border-radius:7px;
        }
     </style> 
    
    </head>
    <body>
    	<form id="">
    		 <label>CheckBox: </label>
    		<input name="id_pepe[]" type="checkbox" id="id_pepe" value="" />
    	</form>
    </body>	
    </html>	
    
      Votes: 0 - Link answer
     
  • Date: 30-10-2015 10:34:46 Hola daniel tienes q tener en cuenta que todo los navegadores no se comportan igual , es por los estandares

    lo que puedes hacer es esto , saludos

    
    input[type="checkbox"] {
        opacity: 0;
        position: absolute;
    }
    input[type="checkbox"] + label {
        text-align:center;
        cursor:pointer;
    }
    
    input[type="checkbox"] + label div {
        display:inline-block;
        line-height: 16px;
        font-size: 12px;
        height: 16px;
        width: 16px;
        margin:-0px 4px 0 0;
        border: 2px solid #f00;
        color: transparent;
        border-radius: 2px
    }
    input[type="checkbox"]:checked + label div {
        color: black;
        background-color: blue
    }
    
    


    
    <label>CheckBox :</label> 
    <input name="id_pepe[]" type="checkbox" id="id_pepe" value="" />
    <label><div>&#x2714;</div>
    </label>
    
    
      Votes: 2 - Link answer
     
  • Date: 30-10-2015 10:41:38 Espera a darte cuenta que aparte de tomar en cuenta la marca de navegador también debes de considerar la versión.....
      Votes: 0 - Link answer
     
  • Date: 30-10-2015 10:49:21 Hola Daniel:

    La verdad es que mi obligación actual de estudiar y a cierta edad, ... (y para colmo educar a adultos en diferentes profesiones que dicen que saben, ...). Pero es otra historia.

    Estoy viendo tu código y hay algo que me sobra y que me falta.
    Los -webkit-, -ms-, -o-, -xv-, -moz- con border-radius y otras etiquetas propias de CSS3, van siendo poco a poco asimilados por los navegadores.

    Salvando tu código te sugiero algunos cambios: (comentado lo que quito y pongo)
    input[type="checkbox"]{
    	-webkit-appearance: none;
    	-ms-appearance: none;
    	-o-,-xv-appearance: none;					
    	-moz-appearance: none;
    	border:2px solid #FF0000;
    	width: 15px;
    	height: 15px;
    	-webkit-border-radius:2px;
    	-ms-border-radius:2px;
    	/* -o-,-xv-border-radius:2px; // No, si acaso, separa */
            -o-border-radius:2px;
            -xv-border-radius:2px;
    	-moz-border-radius:2px;
    /* Y añade necerariamente la siguiente línea */
            border-radius:2px;
    	outline-style:none;
    } 


    En el caso de border-radius, box-shadow y algunas más, ya están aceptadas por los navegadores más habituales por lo que sobran los prefijos.

    Yo he venido usando en mis diseños y para no complicarme con CSS, imágenes donde oculto el checkbox o radio y muestro las imagenes mediante un span generado el <label>

    Si mis anotaciones expuestas no corrigen tu problema, te muestro los códigos (HTML5 y CSS3) para generar checkbox y radio mediante imágenes.

    En el fin de semana tendré tiempo para mostrártelo si es de tu interés.
      Votes: 3 - Link answer
     
  • Date: 30-10-2015 11:25:31 Juan:

    Perfecto ... ya lo probe en los navegadores Explorer, Opera, Chrome y Firefox, en todos sale el mismo formato y diseño, lo que indica que funciona correctamente.
    Si bien el diseño que hice no es el fin ultimo, pero la idea es que al modificar el diseño del CheckBox o Radio Button se vea igual en todos los navegadores.

    Artzain:
    He visto tu codigo, me parece interesante, no obstante la idea de lo que queria hacer es tal cual lo plantea Juan.

    Muchas gracias a ambos, paso a dar por resuelta la pregunta

    Un saludo a todos
    Daniel
      Votes: 0 - Link answer
     
  • Date: 30-10-2015 18:35:40 OBSERVACION IMPORTANTE:

    Si uno va a modificar el diseño de los CheckBox o Radio Button ... el script que presento Juan funciona muy bien en todos los navegadores.
    Ahora bien si por casualidad a alguno se le ocurre usar Bootstrap ... le digo que no va a funcionar y lo adecuado es que recurran a esta librería que funciona muy bien >>> Ver AQUI <<<

    Buenas noches para todos, sigo renegando ...
    Un saludo
    DC
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com