6

How do I get rid of the blue shadow around buttons when I click on them?

I am building a web app using Elm and mdgriffith/elmui.

Picture of button before click:

enter image description here

And after click:

enter image description here

Elm code:

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)

I don't want to use any CSS, if at all possible.

Edit:

I don't think this is a duplicate, because my question is about how to do this with elm-ui, not with CSS.

8n8
  • 1,233
  • 1
  • 8
  • 21
  • Possible duplicate of [How to remove border (outline) around text/input boxes? (Chrome)](https://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome) – glennsl Mar 15 '19 at 13:40
  • 4
    This is an accessibility feature that you shouldn't just get rid of. You might want to style it differently, but in-familiarity will still diminish accessibility. – glennsl Mar 15 '19 at 13:43
  • 1
    @glennsl I am going to do something else with the button so you can see when it has been clicked on, but I don't like the blue outline. WRT the answer you linked to, I don't really want to use CSS, because the whole reason for using elm-ui is that it replaces CSS. – 8n8 Mar 15 '19 at 13:46
  • Perhaps suggesting it's a duplicate is a bit strong, but that is essentially the answer. There might be something in elm-ui that lets you do this without directly touching CSS, but you'd still use CSS indirectly. I don't see much point in making that distinction. – glennsl Mar 15 '19 at 15:36
  • 1
    You could perhaps hold your nose and hide it in an attribute definition tucked away somewhere out of sight. For example: `let noOutline = style "outline" "none"`, which I think you should then be able to use like this: `Ei.button [ noOutline ] ...` – glennsl Mar 15 '19 at 15:39
  • 1
    Thanks, that helps. Ended up with `noOutline = E.htmlAttribute <| style "box-shadow" "none"`. Seems a shame to have the CSS, but never mind. – 8n8 Mar 15 '19 at 16:17

2 Answers2

5

The solution I'm going with is to use a bit of CSS, as I can't find a way to do it in elm-ui. This works:

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"
        }

(Thanks to glennsl's comment.)

8n8
  • 1,233
  • 1
  • 8
  • 21
3

To avoid css, consider using layoutWith together with a focusStyle.

Unfortunately this is global and will apply to all Input elements

Edit: In practice this looks like

Element.layoutWith
            { options =
                [ focusStyle
                    { borderColor = Nothing
                    , backgroundColor = Nothing
                    , shadow = Nothing
                    }
                ]
            } 
            listOfattrs
            listOfchildren
N Kuria
  • 153
  • 1
  • 5
  • I think this is better than my answer, because it feels hacky to have to use CSS. – 8n8 Dec 25 '20 at 17:20
  • 1
    I came across this question while looking for a way to prevent the blue focus shadow on _just one_ button. The non-global answer is: `Element.Input.button [ focused [] ] {...}`. See 'Temporary Styling' in the [elm-ui documentation](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element). – AlanQ Nov 27 '22 at 20:40