Contact Form Select Retina Ready Image

Maybe I didn’t explain clearly enough. What I am talking about is replacing the current image with the one that I have uploaded in my media library. I am able to do so with this code but the problem is that it doesn’t fit within the box the way the mockup that I sent looks. Can you let me know how I can make this work please?

#top select, #top .avia_ajax_form .select, #top .entry-content-wrapper select, #top .mobileMenu { background-image: url(link-to-your-icons.png); }

Thank you Vinay! I changed the image in the code to a thinner icon and adjusted the size to 24×24. I really like the way it looks now. The only issue I have is that when I pull up this page on my iPhone and iPad with retina screens the image looks pixelated like the original enfold select image did. I assume this is due to the fact that the size of the image is 24×24 My question is, if I use a larger image size, will I be able to scale it to fit the section like it does now? The larger image I use, the more it fills up the section but doesn’t look good. Basically, how can I make this image retina?

Here is the icon that I used: https://www.iconfinder.com/icons/296826/arrow_down_icon#size=24

select {
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    border: none;
    background: transparent url("https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-24.png") no-repeat 96% center !important;
   }

• This reply was modified 8 years, 10 months ago by djshortkut.

Thank you Vinay, I tried inputting this code for retina devices in my quick css with this media query. The problem is that when I enlarge the size of the image for retina devices, it also enlarges the size of the icon within the box (which I don’t want) because it ends up being too large. (See images)

I think the pixelation problem has to do with me scaling down the image so small and that’s why it is showing up pixelated on retina devices. I already have this custom icon uploaded to my theme in the Iconfont Manager, can’t I just access this icon this way. That way, when the icon is scaled down, it will still stay retina and look great on my retina devices since they are .svg files. I already have this icon used on another page on my theme and it shows up retina quality. The color I need the icon is #808080 and size of 24×24 I feel like it would be easier to do it this way. The icon info is below. Can this be done? Thanks for all your help!

( 'font' =>'lineicons9', 'icon' => 'ue800');

Thanks Vinay! Here you go.

Again the icon font I want to use is lineicons9 => ue800 and the color is #808080 in size of 24×24

I imported the fonts in the import/export section of the theme under the Iconfont Manager in the Enfold settings (See Images) These were fonts I downloaded from fontello as .svg fonts The one that you uploaded is too large for that section and the wrong color so I put the old one back. Plus it still doesn’t look hi-res on my retina device. I think the only way to make it retina is to use this icon font. Thanks!

'font' =>'lineicons9', 'icon' => 'ue800'

• This reply was modified 8 years, 10 months ago by djshortkut.

Thanks for all the help Vinay! I was actually able to figure it out. I was able to download a plugin that makes it possible to upload .svg icons directly to my media library and then plug that in to the url in the code.

One last thing, is there a way that I can move the icon over in the datepicker section only? (See Image) Thanks!

• This reply was modified 8 years, 10 months ago by djshortkut.

Thanks Vinay! You can close this thread.