I'm trying since one hour to manage my HTMl selects and to replace the dropdown icon by an SVG but I don't get it running.
This is my code:
select { padding: 15px; border-radius: 3px !important; height: 50px !important; color: #ffffff !important; padding-right: 30px !important; font-size: 14px !important; border-color: blue !important; position: relative; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; background: blue url("data:image/svg+xml;utf8,<svg height='24' viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='#FFFFFF'/></g></svg>") no-repeat !important; background-position-x: 100%; background-position-y: 5px; }
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
What I'm doing wrong here?
You need to adjust the viewbox as the path defined cannot be seen with the actual viewbox. Then remove the extra height definition and also remove the !important
to be able to set background-position
select { padding: 15px; border-radius: 3px; height: 50px; color: #ffffff; padding-right: 30px; font-size: 14px; border-color: blue; position: relative; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; background: blue url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat; background-position: right 5px top 50%; }
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.