Question

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

我正在使用Elm和mdgriffith/elmui构建网络应用。

点击前按钮的图片：

然后单击：

榆木代码：

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的评论。）

Answer 2

为避免使用 css，请考虑将 layoutWith 与 focusStyle 一起使用。

不幸的是，这是全局的，将适用于所有输入元素

编辑：在实践中，这看起来像

Element.layoutWith
            { options =
                [ focusStyle
                    { borderColor = Nothing
                    , backgroundColor = Nothing
                    , shadow = Nothing
                    }
                ]
            } 
            listOfattrs
            listOfchildren

单击按钮时出现蓝色阴影

2 个答案: