Help with CSS

[icabraja]

Hello, first of all I wish You all happy holidays! Second of all, I am looking for a good soul to help me out with a problem that I have, and that's a lack of knowledge regarding CSS. I have a form with prepend icons and width of 500px, but SelectBox doesn't have width and prepend icon options. I have managed to set SelectBox width with CSS but formatting the icon to match the position, color and what not is above my head. The icon in question is "home-account"

This is my CSS file.

.width select {
    width: 500px;
}
.icon::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>home-account</title><path d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75M12,15C13.5,15 16.5,15.75 16.5,17.25V18H7.5V17.25C7.5,15.75 10.5,15 12,15Z" /></svg>');
    position: absolute;
    height: 100%;
    width: 32px;
}

Cheers everyone!

[Badgerati]

Hi @icabraja,

I rely on Bootstrap to do this for me Pode.Web, it goes over my head as well! 😂 Only help I might be able to give is that a "select" element in HTML is tricky because they're not like other "form" elements - they're a pain to do any kind of styling with, which is why it's usually quite limited, even to the point BootStrap doesn't support prepended/appended icons on them!

If you do find a way to get the icons working, I'd love to know; can probably look at getting it into Pode.Web 😄