1

I try using css to open and close my chatbox at the bottom right of a webpage. It works fine in Chrome and Firefox.

But when using ie9.js and test on IE 8, the code not run as expected.

Script include:

<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]>
    <script src="https://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

HTML:

<div class="chat-box">
    <input type="checkbox" />
    <label class='abc' data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
    <div id="chatForm" class="chat-box-content">Colapse me !!!
        <br/><br/>
        <br/><br/>
        <br/><br/>
    </div>
</div>

The code works fine:

.chat-box > label:before {content:attr(data-collapsed)}

The code below not working: The content of label:before not change ?

.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}

Jsfiddle: http://jsfiddle.net/leucoaeetus/C82qA/

Please help me to resolve this. How can i make title of chatbox change when checkbox checked?
Thanks in advance !

Vunb
  • 484
  • 8
  • 34
  • [`before`](http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx#pseudo-elements) is recommended to use with double colon, [`checked`](http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx#pseudo-classes) is a CSS3 _pseudo class_, which is not supported in IE8. – Teemu Apr 23 '14 at 05:30
  • @Teemu thank you for replying. I following the example using [ie7-js](https://code.google.com/p/ie7-js/), it works in IE8 with [checked](http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx#pseudo-classes) Here is an example: – Vunb Apr 24 '14 at 03:26
  • Example link: https://ie7-js.googlecode.com/svn/test/checked.html – Vunb Apr 25 '14 at 03:26

0 Answers0