2012-11-28 4 views
2

인트라넷 애플리케이션 용으로 XUL을 실험하고 있습니다.CSS! important는 XUL 요소에는 영향을 미치지 않습니다.

CSS에서 문제가 발생했습니다.이 스타일의! and important 지시어는 'error'클래스의 텍스트 요소에 영향을주지 않습니다.

textbox.error { 
background-color: #F00 !important; 
} 

-moz-appearance : none; 그것은 작동하기 시작하지만 그 요소에 대한 모든 스타일을 잃어버린다.

배경색 속성 (이 경우) 만 오버로드하는 방법이 있습니까?

내 응용 프로그램의 기본 모양을 원합니다. 그래서 매우 차선입니다.

감사

- 편집 -

이것은 XUL 구조입니다 :

<?xml version="1.0"?> 
<?xml-stylesheet href="/_backend/views/css/xul.css" type="text/css"?> 

<window 
id="workorders-edit-window" 
title="{$title}" 
orient="horizontal" 
width="500" 
height="400" 
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<vbox flex="1" orient="vertical"> 

    <groupbox> 
     <caption label="Osnovne informacije"/> 

     <hbox flex="5"> 
      <vbox> 
       <label control="ref" value="Št. delovnega naloga"/> 
       <textbox id="ref" size="10" value="" class="error"/> 
      </vbox> 
     </hbox> 

    </groupbox> 

</vbox> 

</window> 

그리고 CSS :

@import url(chrome://global/skin/); 

textbox.error { 
background-color: #F00; 
} 
+1

HTML은 어떻게 생겼습니까? – twodayslate

+0

선택자와 더 구체적으로 해 보았습니까? HTML을 보지 않고서는 대안을 제공하기가 어려울 것입니다. 극한 상황을 제외하고는 중요합니다. – Richlewis

+0

xul과 css가 추가되었습니다. 필자는 textbox # ref와 심지어 inline (style = "")을 시도했지만 효과가 없었습니다. -moz-appearance : none을 추가했을 때만. –

답변

2

불행하게도, 그 얼마나 시스템의 작품입니다 . 네이티브 스타일을 원한다면 시스템에 의해 설정 될 많은 속성이 있습니다 - 당신은 그것들을 오버라이드 할 수 없습니다. -moz-appearance: none을 통해 기본 스타일을 사용하지 않도록 설정하면 일반적으로 정상적으로 작동하는 모든 속성을 정의해야합니다.

그러나 때때로 네이티브 스타일에 의해 결정되지 않는 다른 CSS 속성을 사용하여 원하는 효과를 얻을 수 있습니다. 나는 해결책을 스스로 고안하지 않았다. 나는 오히려 findbar code의 역할을 조사했다. 여기에서 box-shadow property을 사용할 수 있음을 알았습니다.

textbox.error { 
    box-shadow: 0 0 0 1em #f00 inset; 
} 
+0

'-moz-appearance : none'이 어떻게 작동하는지 명확히 해 주셔서 감사합니다. 나는 그림자가 배경보다 더 좋다는 것을 말해야 만한다. 단지 '삽입'은 나를 위해 작동하지 않는다. 그러나 이것은 중용입니다. 결론 : 대체 CSS 스타일을 찾아야합니다. –

관련 문제