活动按钮上没有阴影,没有轮廓,没有边框

时间:2022-08-09 18:21:11

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

我试图删除Ionic Framework中活动边框的所有阴影,边框或其他轮廓元素。

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

到目前为止,我尝试使用以下指标修改.sass文件:

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.

1 个解决方案

#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

在@ntgCleaner的帮助下,他展示了如何使用Chrome调试器(请参阅我的帖子上的评论),我发现当点击按钮时,您会看到课程如何从

class="button" 

to

class = "button activated"

So in my css/sass file, I added:

所以在我的css / sass文件中,我添加了:

.button.activated {

 // my custom styiling

}

and that worked!

那工作!

#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

在@ntgCleaner的帮助下,他展示了如何使用Chrome调试器(请参阅我的帖子上的评论),我发现当点击按钮时,您会看到课程如何从

class="button" 

to

class = "button activated"

So in my css/sass file, I added:

所以在我的css / sass文件中,我添加了:

.button.activated {

 // my custom styiling

}

and that worked!

那工作!