1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Checkbox perdendo o estilo

Olá galera,

Seguinte, coloquei um estilo em minha página e ele não faz nenhuma alteração no checkboxes. Porém, quando eu coloco o estilo os checkboxes ficam muito estranhos e impossibilitados de serem clicados. Segue imagem : https://www.filepicker.io/api/file/sveHm49RjKHYkBfIuWGy

Na coluna presente? era para estar o checkbox.

Segue meu css :

body{
    color:#000;
    font: normal 11px Times, serif;
    line-height:1.4em;
    letter-spacing: 1pt;
    margin:0 0 20px 0;
    padding:0;
    text-align:center;
    background-color: #ECEEF2;
}

a{font-weight:bold;color: #323230;text-decoration:none}

a:hover{text-decoration:underline;}

a:active, a:visited{color: #323230;}

h3{margin:0; padding:0;}

#container{
    background:transparent url(header.jpg) no-repeat top left;
    margin:0 auto; padding: 300px 0 0 0; position:relative; width:100%; text-align:left;
}

#container p{margin: 0 0; padding: 0px 0;}

.p1:first-letter{font-size: 18px;}

#intro, #supportingText{width:400px; padding:0; margin:0 auto}
.center
{
margin:15px auto;
width:85%;
}
#pageHeader{
    text-align: center;                
    left: 33px;
    top: 50px;
    width: 100%;
    height: 100%;
    padding: 10px;
        font-size:150%;
}

#Header{
    text-align: center;                
    left: 33px;
    top: 0;
    width: 100%;
    height: 100%;    
        font-size:150%;
}

#footer{margin:30px 0 10px 0;width: 415px;text-align:center;}

#footer a{color:#FFFFFF}

#preamble h3{
    display:block;
    height: 40px;
    width: auto;
    padding-top: 20px;
    font-size: 16px;
    padding-left: 20px;
}
.errorLogin {margin:10px auto;
                display: inline-block;}

input         { margin:10px auto;
                display: inline-block;
                width:200px;
                 border: 1px solid #ccc;

  /* Safari 5, Chrome support border-radius without vendor prefix.
   * FF 3.0/3.5/3.6, Mobile Safari 4.0.4 require vendor prefix.
   * No support in Safari 3/4, IE 6/7/8, Opera 10.0.
   */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  /* Chrome, FF 4.0 support box-shadow without vendor prefix.
   * Safari 3/4/5 and FF 3.5/3.6 require vendor prefix.
   * No support in FF 3.0, IE 6/7/8, Opera 10.0, iPhone 3.
   * change the offsets, blur and color to suit your design.
   */
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;

  /* using a bigger font for demo purposes so the box isn't too small */
  font-size: 20px;

  /* with a big radius/font there needs to be padding left and right
   * otherwise the text is too close to the radius.
   * on a smaller radius/font it may not be necessary
   */
  padding: 4px 7px;

  /* only needed for webkit browsers which show a rectangular outline;
   * others do not do outline when radius used.
   * android browser still displays a big outline
   */
  outline: 0;

  /* this is needed for iOS devices otherwise a shadow/line appears at the
   * top of the input. depending on the ratio of radius to height it will
   * go all the way across the full width of the input and look really messy.
   * ensure the radius is no more than half the full height of the input, 
   * and the following is set, and everything will render well in iOS.
   */
  -webkit-appearance: none;

}


#preamble h3 span{}

#explanation h3{
    display:block;
    height: 20px;
    width: auto;
    padding: 20px;
    font-size: 16px;
}

#explanation h3 span{}

#participation h3{
    display:block;
    height: 20px;
    width: auto;
    padding: 20px;
    font-size: 16px;
}

#participation h3 span{}

#benefits h3{
    display:block;
    height: 20px;
    width: auto;
    padding: 20px;
    font-size: 16px;
}

#benefits h3 span{}

#linkList{
    position:absolute;
    top: 330px;
    margin-left: 445px;
    padding-bottom: 20px;
    width:200px;
    background-color: #BBBBBB;
}

#linkList ul{
    list-style-type:none;
    margin:0 20px;
    padding:30px 0 20px 0;
}

#linkList li{
    padding:0 0 0 28px;
    margin-bottom: 10px;
}

#lselect a{
    display:block;
    padding: 0;
    margin:0;
}

#lselect a.c{
    display:inline;
    color:#2B7F01;
}

#larchives ul{
    padding:30px 0 5px 0;
}

#lresources ul{
    padding:20px 0;
}

#larchives h3{
    display:block;
    height: 20px;
    width: auto;
    font-size: 14px;
    padding-left: 40px;
}

ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}

.cbx         { margin:10px auto;                
                width:500px;


  /* Safari 5, Chrome support border-radius without vendor prefix.
   * FF 3.0/3.5/3.6, Mobile Safari 4.0.4 require vendor prefix.
   * No support in Safari 3/4, IE 6/7/8, Opera 10.0.
   */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  /* Chrome, FF 4.0 support box-shadow without vendor prefix.
   * Safari 3/4/5 and FF 3.5/3.6 require vendor prefix.
   * No support in FF 3.0, IE 6/7/8, Opera 10.0, iPhone 3.
   * change the offsets, blur and color to suit your design.
   */
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;

  /* using a bigger font for demo purposes so the box isn't too small */
  font-size: 20px;

  /* with a big radius/font there needs to be padding left and right
   * otherwise the text is too close to the radius.
   * on a smaller radius/font it may not be necessary
   */
  padding: 4px 7px;

  /* only needed for webkit browsers which show a rectangular outline;
   * others do not do outline when radius used.
   * android browser still displays a big outline
   */
  outline: 0;

  /* this is needed for iOS devices otherwise a shadow/line appears at the
   * top of the input. depending on the ratio of radius to height it will
   * go all the way across the full width of the input and look really messy.
   * ensure the radius is no more than half the full height of the input, 
   * and the following is set, and everything will render well in iOS.
   */
  -webkit-appearance: none;

}
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags css html css3 ou faça a sua própria pergunta.