Can't remove blue glow from jQuery mobile collapsible

Question

Am having a lot of trouble making it so that a jQuery mobile collapsible does not display the blue glow box shadow when clicked. Given some HTML such as:

<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button id="a1">Go</button></div><br><br>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button id="a2">Go</button></div><br><br>
<br>

... some other answers I found seemed to suggest that the following CSS would help, but no dice:

.collapsibles {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

Also tried applying this CSS to the h1s, applying it inline, and a few other things - no success so far.

JSFiddle demonstrating the problem: https://jsfiddle.net/pseudobison/xd6oejzz/2/

Provide a working example. None of these snippet show us your problem. — Pedram, Feb 18 '18 at 09:44
Thanks @Pedram, I've just added a working example here: https://jsfiddle.net/pseudobison/xd6oejzz/2/ — Gabriel, Feb 18 '18 at 10:00

score 1 · Answer 1 · answered Mar 15 '18 at 09:11

The JQM class to override is .ui-btn:focus.

If you want to avoid the blue halo just only for the collapsible heading button, use:

.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

You can also remove the blue halo from all the clickable widgets inside the collapsible, by overriding

.ui-collapsible .ui-btn:focus

DEMO:

.ui-collapsible .ui-collapsible-heading-toggle.ui-btn:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.ui-collapsible .ui-btn:focus {
  /*
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  */
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div role="main" class="ui-content">
        <div class="row collapsibles" data-role="collapsible">
          <h1>Supercategory A</h1>
          <div class="col-xs-7 txt">A1</div>
          <div class="col-xs-5"><button id="a1">Go</button></div><br><br>
          <div class="col-xs-7 txt">A2</div>
          <div class="col-xs-5"><button id="a2">Go</button></div><br><br>
          <br>
        </div>
      </div>
    </div>
  </body>
</html>

score 0 · Accepted Answer · answered Feb 18 '18 at 10:01

0

Kindly change the DOM selector that will apply those changes:

/* This will removed the blue outline once expanded */
.collapsibles h1 a.ui-collapsible-heading-toggle {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

Here is a sample JS Fiddle: https://jsfiddle.net/wvta0ezL/4/

Hope this helps for your case.

answered Feb 18 '18 at 10:01

Marylyn Lajato

1,171
1
10
15

Brilliant, that did it. Thank you! – Gabriel Feb 18 '18 at 10:03
Does not work in JQuery Mobile 1.45... I've used ".ui-collapsible-heading-toggle" instead of ".collapsibles h1 a.ui-collapsible-heading-toggle" and it works (again) – Jonny Oct 14 '18 at 19:28

Can't remove blue glow from jQuery mobile collapsible

2 Answers2