accessibility - 单击按钮时的蓝色阴影

Question

单击按钮时如何消除按钮周围的蓝色阴影？

我正在使用 Elm 和 mdgriffith/elmui 构建一个网络应用程序.

点击前按钮图片:



点击后:



Elm 代码:

module Main exposing (main)                                        

import Browser                                                     
import Element as E                                                
import Element.Input as Ei                                         
import Element.Border as Eb                                        

main = E.layout [ E.padding 30 ] <|                                
    Ei.button []                                                   
        { onPress = Nothing                                        
        , label = E.text "A button"                                
        }           

( run it in Ellie )

如果可能的话，我不想使用任何 CSS。

编辑:

我不认为这是重复的，因为我的问题是关于如何使用 elm-ui 而不是 CSS 来做到这一点。

Answer 1

我要使用的解决方案是使用一些 CSS，因为我找不到在 elm-ui 中执行此操作的方法。这有效:

module Main exposing (main)

import Html.Attributes as Hat
import Element as E
import Element.Input as Ei

noOutline = E.htmlAttribute <| Hat.style "box-shadow" "none"

main = E.layout [ E.padding 30 ] <|
    Ei.button [ noOutline ]
        { onPress = Nothing
        , label = E.text "A button"
        }

(感谢 glennsl 的评论。)