# Trying create a choice list with icon (CSS) **URL:** \ **Category:** Ask for Help\ **Created:** [June 16, 2022, 2:55pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163 "2022-06-16T14:55:16Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 16, 2022, 2:55pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/1 "2022-06-16T14:55:16Z")
Hello, I am experimenting with a css code which would aim to put an icon of the possible choice in a list using the “chips” mode. I don’t know how is it possible to set-up an icon by choice, obviously in my rows this has already been done, but since it’s CSS I don’t know how I could do to put the icon in the right place. Below is an example of what I would like. ![Capture d’écran 2022-06-16 à 16.44.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/9/59d5c6ccb9a02e5776f6f4114637862ed54d6307.png) Here we can see our rows where the right icon was put in the right choice ![Capture d’écran 2022-06-16 à 16.50.48](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/829607ee23b427e93a1cc298a88cf488099dd987.png) And here was my CSS code: > ``` > .iEKkcy { display: inline-block; position: relative; cursor: pointer; font-weight: 400; font-size: 15px; width: 48.5%; line-height: 100px; margin: 0px px 4px 0px; padding: 18px px; border-radius: 16px; overflow: hidden; } .iEKkcy ::before { content: url(https://vidaone.ch/wp-content/uploads/2022/06/Icon-metro-heartbeat.png); position: absolute; padding: 0px; top: 15px; margin-left: 0px; z-index: 2; width: 56px; height: 0px; } .iEKkcy .display-item { position: absolute; left: 0px; top: 0px; padding: 65px 0px 0px 0px; width: 100%; height: 100%; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .iEKkcy.current .display-item { color: #000; background-color: #DED8FC; font-weight: 600; } } > ``` Some one have already do this for him or a client ? I just want to know if we can target the words like “Test 1” Test 2" into our CSS to put the right icon in the right place ! Thank’s ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 16, 2022, 3:24pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/2 "2022-06-16T15:24:54Z")
Have you considered using an Inline List in tiles layout instead of a choice component? It’s possible to set that up so that it behaves like a choice component, and you can include your logos as images with zero CSS required. ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 16, 2022, 3:38pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/3 "2022-06-16T15:38:19Z")
Yes I thought about it but here in this case it is for a form. So with Inline List we cannot “select” an option, we can just click on this and after create a action. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 16, 2022, 3:47pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/4 "2022-06-16T15:47:16Z")
As I mentioned, you can make an Inline List behave like a choice component. What you need to do is create a single relation from the table that contains your choice options to the table/row that your screen is attached to. You can then configure an action on the inline list that does a set column values through that relation and updates the values in the same column that your choice component currently writes to. ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 16, 2022, 4:01pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/5 "2022-06-16T16:01:18Z")
Yes, that’s what I was testing by now, maybe it’s the better option ! And it was native so it’s better. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 16, 2022, 4:07pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/6 "2022-06-16T16:07:46Z")
Yes, I think it’s a better option. You can do a lot with an Inline List that you can’t with a standard choice component. You can change the image/colour/text to indicate which option is selected, and you can also trigger actions - which can’t be done otherwise. If you have problems getting it working, just ask. Myself and others here use this technique a lot. ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 16, 2022, 4:17pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/7 "2022-06-16T16:17:51Z")
Ok can u let me how u can change the image/color for indicate with option is selected ? Because i was using this only with the trigger actions ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 16, 2022, 7:22pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/8 "2022-06-16T19:22:26Z")
Ok, I searched and I really did not find this solution. The only thing I managed to do was create a trigger to set up a column, the problem is that it only works if I trigger with : 1. Set Up column 2. Open new form When I open the new form it is impossible for me to configure the 2nd choice which is in another Row, this technique only works if my choice is made on a Row. So my problem persists, in my form I have 2 choices to make from 2 different rows. So we come back to the famous problem that with the Inline list I cannot “select” a choice. I Need to have 2 Inline List for make 2 choice, from 2 different row to put it into the same ROW. **Row 1** : _ **Choice 1** _ where need to be, _ **Choice 2** _, where need to be. **Row 2:** Multiple Choice 1 **Row 3:** Multiple Choice 2 And i dont want do a trigger “Add a row”, because this option need to be only when the client validate the form, so i dont want add a row in the first choice of the client, because maybe the client dont gonna finish the form and we gonna have a “Blank Row” we don’t need it. That’s why my need it’s really a “Selected Choice” from 2 rows different. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [June 16, 2022, 11:54pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/9 "2022-06-16T23:54:55Z")
Why do you need to open a new form though? I thought this was only for adding user choices in a single form, where you need 2 “choice components”? ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 17, 2022, 8:24am UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/10 "2022-06-17T08:24:39Z")
> [@Carter](#): > > I Need to have 2 Inline List for make 2 choice, from 2 different row to put it into the same ROW. > > **Row 1** : _ **Choice 1** _ where need to be, _ **Choice 2** _, where need to be. > **Row 2:** Multiple Choice 1 > **Row 3:** Multiple Choice 2 Just trying to understand this. What I am understanding is that you want to make a selection from the first list, and then the second list will change depending on which option you choose from the first list. And you want this to look like the first screen shot that you posted. Is that correct? If it is, let me know and I’ll make a short video to show you how to do it. ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 17, 2022, 12:28pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/11 "2022-06-17T12:28:42Z")
> [@Darren\_Murphy](#): > > Just trying to understand this. What I am understanding is that you want to make a selection from the first list, and then the second list will change depending on which option you choose from the first list. And you want this to look like the first screen shot that you posted. Is that correct? If it is, let me know and I’ll make a short video to show you how to do it. Yes that’s correct, and the second list was another Row, so our first choice was 1 row, 2 was another row. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 17, 2022, 1:00pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/12 "2022-06-17T13:00:17Z")
Do you mean that the value selected for each one should be written to a separate row? In the same column, or two different columns? That’s quite an odd use case - what happens with these values once they have been written? ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [June 17, 2022, 9:42pm UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/13 "2022-06-17T21:42:08Z")
Also… vote here: > [@Images in Choice Component](https://community.glideapps.com/t/images-in-choice-component/34102): > > It’s time. We need images in choice components (at least in dropdown, chips and checklist…I get why it may not be possible in segmented view). I see it working a lot like what Google is implementing for chips in Gmail: Multiple Selection Checklist would look like what we have for inline list \> checklist. Dropdown would look like inline list \> compact list. @tristan @tristan ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 20, 2022, 9:33am UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/14 "2022-06-20T09:33:41Z")
No the choice was in 2 separate rows, but the value for each one was write in a row with 2 different columns. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [June 20, 2022, 10:47am UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/15 "2022-06-20T10:47:09Z")
ah, I see. Okay, that’s easy enough. Did you still need some help with that? If yes, please say so and I’ll make an example for you. ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 20, 2022, 10:58am UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/16 "2022-06-20T10:58:31Z")
Yes, I will appreciate for a help. I know to do with 1 row, but my problem it’s do it with 2 different row (choice list). ---
**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\ **Post date:** [June 20, 2022, 11:59am UTC](https://community.glideapps.com/t/trying-create-a-choice-list-with-icon-css/43163/17 "2022-06-20T11:59:03Z")
😃