[Resolvido] Aplicando estilo em um campo readonly (IE)

[Fever 0]

Pessoal, boa tarde.

 

Estou desenvolvendo um projeto, onde a pessoa preenche um formulário, este formulário abre em outra página como ReadOnly (a pedido do cliente), então quando eu clico em "Editar" os campos são desbloqueados.

 

O formulário funciona normalmente.

 

Porém quando eu abro pelo firefox, eu digito os dados, clico em enviar, sou jogado na página do editar, esta página está com os campos apagadinhos, como se fosse a personalização readonly mesmo, mas isso no IE, ele fica readonly mesmo, mas fica com a cor do campo normal, como se pudesse digitar.

 

Eu queria colocar ele tipo apagadinho como acontece no firefox, e ao se clicar em editar, ele volte a cor normal. creio que isso seja CSS.

 

Seria possível?

 

Agradeço desde já.

[Thiago Retondar 18]

Coloque uma classe e estilize-o.

 

.readOnly{ background: #ccc; color: #cecece; /* troque os valores */ }

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Fever 0]

Obrigado thiago,

 

porém assim ele não troca para a cor normal ao clicar em editar,

 

tem como ao clicar em editar, além de desbloquear, ele trocar a classe das caixas de texto?

 

ou ja tenha alguma função do css que lida apenas com o readonly?

 

Assim como o disabled, que é possivel colocar a classe normal, e a classe quando está "disabled"

 

.button {background: #FFF; color: #0000FF;}
.button[disabled]{background: #ccc; color: #cecece;}

por exemplo.

[Paulo de Tarso F. M. 24]

Nesse caso, quando clicar em "Editar", dê um jeito de remover a class aplicada (com JavaScript talvez seja o mais comum, embora vai depender do que acontece depois que você clica em "Editar")... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

[Fever 0]

Prezado Paulo, bom dia.

 

Entendi o que você quis dizer, tem como você me passar esse script?

 

Então no caso, eu quero que ele, ao clicar em editar, desbloqueie o redonly, que ja acontece, e também que altere ou tire o estilo.

 

Vlw

[Thiago Retondar 18]

Não entendi muito bem, mas acho que é isso:

 

 

HTML

<input type="button" value="Editar" id="editar" readonly="readonly" />

CSS

.editar{ background: #cecece; color: #000; }

JavaScript

window.onload = function(){
    var btnEdit = document.getElementById('editar');
    btnEdit.onclick = function(){
        if(this.readOnly){
            this.readOnly = false;
            this.className = 'editar';
        } else{
            this.readOnly = true;
        }
    };
};

 

Não testei, mas creio que funcione. A lógica é essa.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Fever 0]

Bom, eu coloquei como função no head e chamei com onclick em outro campo, o campo que desbloqueia este quando marcado e deu certo vlw