5

I am trying to remove all shadow, border or other outline elements of an active border in the Ionic Framework.

So far, I tried to modify the .sass file using the following metrics:

to remove the border

$light:                           rgba(255,255,255,0.0) !default;
$button-positive-bg:              $positive !default;
$button-positive-text:            $positive-text !default;
$button-positive-border:          $light !default;!default;
$button-positive-active-bg:       $light !default;!default;
$button-positive-active-border:   $light !default;!default;

to remove the shadow and other

.button:active{
  box-shadow: none !important;
  border-color: rgba(0,0,0,0) !important;
  outline: none !important;
}

However, I still see a small shadow when the button is pressed (grey on white background, darkened on coloured background). How can I remove all these active elements? I just want a plain button.

Thank you.

isherwood
  • 58,414
  • 16
  • 114
  • 157
WJA
  • 6,676
  • 16
  • 85
  • 152
  • 1
    I don't get shadows on buttons in my app. Are you using Bootstrap? – isherwood May 11 '15 at 15:18
  • 1
    When you inspect the button, does the `box-shadow:` have a strikethrough? like something is overriding it? One way to make `!important` even more important is by adding more parent classes to the element. If you are using .button everywhere, maybe they all have a similar parent class. try `body .button:active{...}` – ntgCleaner May 11 '15 at 15:19
  • 1
    Here is an workaround, might help you! http://stackoverflow.com/questions/126445/any-way-to-remove-ies-black-border-around-submit-button-in-active-forms – Pugazh May 11 '15 at 15:20
  • @isherwood: I am using Ionic – WJA May 11 '15 at 15:35
  • @ntgCleaner how can you check? I tried with .body, but still it shows up. – WJA May 11 '15 at 15:36
  • 1
    @JohnAndrews, Take a look at your button in something like chrome or safari, right click on it and look at the styles (usually on the right side). Also don't use `.body` because that means it's looking for an element with the class name `body`. Instead, remove the dot (`.`) and just write `body .button:active {...}` – ntgCleaner May 11 '15 at 15:51
  • Thanks, tried the body but didnt work. When inspecting the element, I noticed that it adds an css "activated" behind the css classes, so like: – WJA May 11 '15 at 16:09
  • solved it! but changing the css class .activated – WJA May 11 '15 at 16:11
  • @humble.rumble thanks for the tip, coming soon, it is late here – WJA May 11 '15 at 20:58

1 Answers1

1

With the help of @ntgCleaner, who showed how to use the Chrome debugger (see comments on my post), I found out that when clicking on the button, you will see how the class changes from

class="button"

to

class = "button activated"

So in my css/sass file, I added:

.button.activated {

 // my custom styiling

}

and that worked!

WJA
  • 6,676
  • 16
  • 85
  • 152