[Resolvido] Como fazer duas imagens dentro de uma input text ?

[rafaeldorazio 2]

EU andei pesquisando e vi que existe a poossibilidade de usar o -> class="class1 class2"

Mas a minha dificuldade seria que há duas imagens uma vai repetir ( repeat-x) e a outra vai ficar alinhada a direita, quando o uso código

 

.cbText { width: 93.5%; border: 1px solid #999 ; height: 21px; -webkit-border-radius: 5px 0px 0px 5px;
        -moz-border-radius:  5px 0px 0px 5px; border-radius: 5px; padding-left: 5px; cursor: pointer; 
            background-image: url('../../img/combobox/combo_select_dhx_skyblue.gif'); background-repeat: no-repeat;
                background-position: right; font-family: Arial; height: 25px; line-height: 25px; }

.errorCbText {  background-image: url(../../img/required_field.png); background-position: bottom; background-repeat: repeat-x; }

 

 

a imagem que fica alinhada para direita ela desaparece, pq ?

[Rafael Wahasugui 0]

Na verdade o que acontece é que mesmo você usando duas classes diferentes a propriedade é a mesma, ou seja, você pode aplicar duas classes mas não duas propriedades, entendeu?

 

A input tem UM background, voce disse na class1 que esse background é vermelho e depois, logo abaixo, na class2 que o background é azul..por isso ele sobrescreve, você está tratando a mesma propriedade em duas classes diferentes.

[rafaeldorazio 2]

EDIT

 

resolvi o problema,

.errorCbText {  background-image: url('../../img/required_field.png'), url('../../img/combobox/combo_select_dhx_skyblue.gif'); background-position: left bottom, right top; background-repeat: repeat-x, no-repeat; }

 

Pode Fechar