Menu
Please look this example:
select { width: 172px; height: 22px; padding: 2px 7px; border: none; background: url(http://imgur.com/MJyZM.png) 0 0 no-repeat; }<select> <option value="abcdefg">abcdefg</option> <option value="1234567">1234567</option> <option value="abcdefg">abcdefg</option> </select>https://jsfiddle.net/jeafgilbert/wz0zaev0/
Can someone please update it to be transparent in Chrome? Currently the result in FF is the correct one. Thanks.
Update:
Now without -webkit-appearance: none; works fine in Chrome.
263
Creating transparency in images can be frustrating unless you use the right techniques, such as these easy methods to make a selection transparent. To make a selection transparent in Photoshop, first, create a selection around the area you want to make invisible. With your selection active, select the desired layer and add a layer mask.
Open Google Chrome and go to a website. Here, we use hostinger.com. Right-click on any part of the web page and select Inspect. Enable the Inspect feature and click on the element you want to hide. Right-click on the code highlighted on the DOM tree and select Hide Element. A new visibility property will appear on the CSS panel.
This way, you can edit text and its style elements, such as the font weight, size, and color. The DOM panel enables simple text modification. Here’s how to do it: Open Google Chrome and go to a website. In this example, we’re using hostinger.com. Right-click anywhere on the web page and select Inspect to open the Developer tools.
Accessing element panel from Google Chrome is quite easy. All you do is head to the upper right side of your screen and click on the Menu bar -> More tools -> Developer tools. Once an element box opens, you’ll see that it’s divided into three different parts. Here’s a little breakdown of each part:
select { width:192px; padding:2px; border:none; background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat; -webkit-appearance: none; }<select> <option value="abcdefg">abcdefg</option> <option value="1234567">1234567</option> <option value="abcdefg">abcdefg</option> </select>Not tested on firefox but it seems -webkit-appearance: none; disables specific behaviours webkit can apply.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
