Customize My First Checkbox Icon with elm-ui
This is the only lesson in which we will fallback to CSS to give our dropdown's scrollbar a fancier look because this is very browser dependent and there is no way (yet) to do this with elm-ui.
Instructor: [0:00] For our final touch to our custom dropdown, we're going to make a last change, which is to make our own input checkbox icon. If you remembered, when we used input.default checkbox, we used the one that came by default with Elm-UI. That doesn't mean that we cannot change.
[0:16] In order to do it, we need to do a small trick. We need to go to the Elm-UI source code. We're going to go to the source element input, and scroll to the end. There we have the default checkbox code.
[0:28] We're going to copy it and then create a new module here. We're going to call checkbox.elm and say module Checkbox exposing (everything). We're going to paste the code.
[0:40] We need to add a couple imports -- import Element exposing (color), Element html Attribute (RGB555), our favorite. Now, import Element.Background and call it Background. Import Element.Border as Border, import Element.Font as Font, and finally import html attribute, exposing class.
[1:05] If we come back here, we do not have access to this internal class. What we're going to do is do call the html attribute class and give it the name focusable. Now it's complaining because we don't have the color white, and that is correct.
[1:19] We're going to go back to our code and we're going to copy these two colors that we have here, white and a light gray. We're going to cut them from this file, paste them here, and now the code is no longer complaining.
[1:30] If we analyze this code, it's quite terse, and it is not important. The way we created our own checkbox, we're going to call customOurOwnCheckbox. In the case where it says that it's checked, instead of having this, by default, blue color, we're going to say that uncheck, display the color light gray.
[1:49] Now when we go back to our code, we can say import checkbox exposing white and light gray, and, where we were previously using our input.default checkbox, now we can say checkbox.Custom. You see?
[2:03] This is how easy it is to customize our own icon checkbox with Elm-UI.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!