1

I am puzzled by the border around the heading in the accordion widget when I click on it. I see this in Chrome only. I don't see it in Firefox, IE, etc.

html:

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#section1">How can I become a Member</a></h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">
        <p>blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, .</p>
    </div>
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#section2">I want to join. What do I do?</a></h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">
        <p>blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, </p>
    </div>

javascript:

$(function() {
$("#accordion").accordion({ heightStyle: "content" });
$( "#accordion" ).accordion({ collapsible: true });
$( "#accordion" ).accordion({ active: false });
});

I do not use the css from JQuery UI.

How can remove the border by using CSS only?

Here is the jsfiddle: http://jsfiddle.net/mddc/67Z8y/3/

Thanks and regards!

Update

I fixed it based on the link Nicolas R provided. Thanks!!!

curious1
  • 14,155
  • 37
  • 130
  • 231
  • 1
    Maybe here? http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome?rq=1 – Nicolas R Aug 05 '14 at 14:12
  • Nicolas, thanks for the pointer!!!!!!!!! I fixed it according to the link you gave. – curious1 Aug 05 '14 at 14:26

0 Answers0