Moficar opacidade de check-box do primefaces via CSS

3 respostas
D

Bom dia pessoal, estou com a seguinte situação, tenho um check-box (selectBooleanCheckbox do primefaces) que é apenas para visualização, o usuário não pode alterar seu conteúdo, mas o primefaces só oferece a opção disabled="true" que contempla a situação, mas ai ele renderiza com uma opacidade de 0.30 ou seja a visualização fica muito fraca, estou tentando alterar a propriedade via estilo CSS, dentro de meu XHTML criei um estilo com o nome checkbox-disabled, alterando a opacidade para 0.99 e a coloquei na propriedade styleClass do selectBooleanCheckbox, mas a propriedade é setada em uma div, mas o check box mesmo está em uma div mais interna, onde não estou conseguindo acessar, os trechos dos códigos estão abaixo, a classe de estilo, onde seto ela, e como é renderizado, gotaria de saber como faço para setar a opacidade? também notei que se remover manualmente o ui-state-disabled também dá certo.

<style type="text/css">		
		.checkbox-disabled {
			opacity: .99;
		}
	</style>
<p:column headerText="#{msg.ativo}"
	style="width: 30px;text-align: center;">
	<p:selectBooleanCheckbox value="#{fornecedor.ativo}"
		styleClass="checkbox-disabled" disabled="true" />
</p:column>
Como o navegador renderiza:
<div id="j_idt102:frmFornecedor:j_idt113:0:j_idt129"
	class="ui-chkbox ui-widget checkbox-disabled">
	<div class="ui-helper-hidden">
		<input id="j_idt102:frmFornecedor:j_idt113:0:j_idt129_input"
			name="j_idt102:frmFornecedor:j_idt113:0:j_idt129_input"
			type="checkbox" checked="checked" disabled="disabled">
	</div>
	<div
		class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active ui-state-disabled">
		<span class="ui-chkbox-icon ui-icon ui-icon-check"></span>
	</div>
</div>

3 Respostas

A

na documentação do Prime explica como customizar o CSS de todos os componentes, já deu uma olhada lá? :wink:

D

olá, dei uma olhada no manual, tentei aplicar a opacidade nas seguinte propriedades mas não deu certo:
.ui-chkbox
.ui-chkbox-box
.ui-chkbox-icon
.ui-chkbox-icon

utilizando desta forma, para todos os exemplos acima:

.ui-chkbox { opacity: .99; }

não teria como eu dizer que este check-box é somente leitura, por exemplo, se eu coloco como disabled=“true”, ele adiciona ui-state-disabled ao final e deixa opaco:

ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active ui-state-disabled

se for false não adiciona, e não deixa opaco. mas permite alterar

ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active

ai eu não colocaria como disabled =“true”, ficando com a cor normal e acharia uma forma do componente ser somente leitura, existe alguma forma alternativa a utilização da propriedade disabled?

A

dudu795:
olá, dei uma olhada no manual, tentei aplicar a opacidade nas seguinte propriedades mas não deu certo:
.ui-chkbox
.ui-chkbox-box
.ui-chkbox-icon
.ui-chkbox-icon

utilizando desta forma, para todos os exemplos acima:

.ui-chkbox { opacity: .99; }

não teria como eu dizer que este check-box é somente leitura, por exemplo, se eu coloco como disabled=“true”, ele adiciona ui-state-disabled ao final e deixa opaco:

ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active ui-state-disabled

desculpe, nao entendi. Se está desabilitado ele adiciona essa classe ao checkbox, é isso? Se sim, tentou sobrescrever ela no seu css?

se for false não adiciona, e não deixa opaco. mas permite alterar

ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active

ai eu não colocaria como disabled =“true”, ficando com a cor normal e acharia uma forma do componente ser somente leitura, existe alguma forma alternativa a utilização da propriedade disabled?

entao, e essa classe “ui-state-disabled”, já tentou sobrescrever ela? não rolou?

Criado 14 de março de 2012
Ultima resposta 14 de mar. de 2012
Respostas 3
Participantes 2