Enhance the appearance of an HTML select tag for optimal viewing on iOS Safari browser for

I have customized three dropdown lists using CSS. I set the style as follows:

.dropdown{
    font-size: 20px;
    background: white;
    border:none;
    position: relative;
}

While the dropdowns appear fine in Chrome, there seems to be a slight difference when viewed on Safari on my iPhone 6s with iOS 10.2.1. A visual representation can be seen in this image: https://i.stack.imgur.com/SVqYW.jpg

Notice the gradient effect and black background near the arrow in Safari.

Is there a way to ensure that the <select> elements have a consistent white background on iOS devices?

htmlioscssiphonesafari

Answer №1

If you want to remove the default iOS styling, consider using this CSS code:

-webkit-appearance: none;

You can apply this to other elements that have unique styling, such as input[type=search].

Answer №2

Stian Martinsen made a valuable recommendation regarding the use of -webkit-appearance: none; to disable the default styling of the <select> element, which also conceals the arrow icon. To address this issue, I have devised an alternative solution outlined below:

.dropdown{
 font-size: 20px;
 background: white;
 border:none;
 position: relative;
 -webkit-appearance: none;
        padding-right: 10px;
 }
 .dropdown:focus{
 outline: none;
 }
 .plain-selector{
 margin: 0 3px;
 }
 .plain-selector::after{
 content: "";
    position: absolute;
    z-index: 2;
    bottom: 30%;
    margin-top: -3px;
    height: 0;
    width: 0;
    right: 0;
    border-top: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
 }
 .plain-selector::before{
 content: "";
    position: absolute;
    z-index: 2;
    top: 30%;
    margin-top: -3px;
    height: 0;
    width: 0;
    right: 0;
    border-bottom: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
 }
 .out-selector{
 position: relative;
 }
     .outter-selection{
     width: 100px;
     }
     .selection{
   display: block;
 margin: auto;
 border-radius: 50px;
 background: white;
 padding: 5px;
 max-width: 360px;
 text-align: center;
 width: 90%;
 position: relative;
 }
body{
 margin-top: 4em;
 background: #2f2f2f;
 color: white;
 font-size: 23px;
 }
<div class="outter-selection">
<div class="selection">
<span class="out-selector"><span class="plain-selector"><select class="dropdown">
<option value="1" selected="selected">choose option 1</option>
<option value="2">choose option 2</option>
<option value="3">choose option 3</option>
<option value="4">choose option 4</option>
</select></span></span>
<span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
          </select></span></span>
<span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
          </select></span></span>
 </div>
 </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website. I attempted to acco ...

javascripthtmlcss

When including external links, the domain is always placed at the beginning of the link, even if the link

Issue: Hyperlinks are displaying our domain name before the actual link. The text stored in our database is as follows: To learn more about Rich Habits <a href=”http://www.externaldomain.com”>click here.</a> When we echo this text in our ...

phphtmlurlhyperlinkhref

I developed a compact application utilizing Node.js in tandem with Express framework

There is an issue with the GPA calculator app built using Node.js and Express. It works fine for a single user, but when multiple users try to use it simultaneously, the scores are being combined, resulting in incorrect values. I need to create an app that ...

javascripthtmlnode.jsexpressejs

What is the best way to implement a calendar view for selecting time periods on an HTML page?

Is there a way to implement a calendar view when clicking on the input box within an HTML page? I am looking to create a function where users can select a time period to generate a file. How can this be accomplished? If possible, could you share some samp ...

javascriptjqueryhtmlmysql

Automatically generating new lines of grid-template-columns with CSS grid

I am new to using grid in CSS and there are still some concepts that I don't quite understand. Below is the container I am working with: <section class="css-grid"> <div class="css-item"><img src="1.jpg" / ...

htmlcsscss-grid

What is the best way to create a responsive div containing multiple images?

I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...

javascripthtmlcss

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

Trying to create a responsive navigation but encountering issues when following these steps: 1. Resize the navigation to less than 940px 2. Activate the menu 3. Resize the browser again to more than 940px 4. The menu is no longer inline and appears messy ...

jqueryhtmlcssnavigationresponsive

Can Chrome support color management for css colors?

In my current project, we are dealing with designers who work in Adobe RGB and are accustomed to viewing the vibrant colors from that spectrum in Illustrator. However, we are developing an application that will enable them to work in a web browser using a ...

csscolorsthree.jscolor-management

Strategically stacking two Bootstrap columns for perfect alignment

I'm currently having trouble with aligning Bootstrap columns. Can someone assist me, please? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <di ...

htmlcssbootstrap-4

What is the best way to format PHP emailed content from a web form?

Currently, I am working on a web contact page and facing an issue where the emails being sent arrive as plain text. I would like to enhance them by adding a background, incorporating the organization's logo, and styling the text to align with the webs ...

phphtmlcssemailcontact-form

Issue with table not remaining inside the div on the content page of WordPress site

I am having trouble with a div on my website. When I include a table in one div it resizes perfectly, but when I do the same in another div using a different template, it doesn't work as expected. To see the issue, please visit: Home page, bottom lef ...

phphtmlcsswordpressblogs

There seems to be an error with the GIDSignInDelegate method stub

class SignUpViewController: UIViewController, GIDSignInUIDelegate, GIDSignInDelegate { //ERROR: Candidate has non-matching type '(GIDSignIn!, GIDGoogleUser!, Error!) -> ()' func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUs ...

iosswift

Tips for dynamically inserting JSON data into HTML elements

{ "top10": [ { "state": "red", "claimed": true, "branch": "release-2.3.4", ...

javascriptjqueryhtmljson

Simple Servlet Program

//VoterServlet.java package com.nt.servlet; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; public class VoterServlet extends HttpServlet { public void doPost(HttpServletRequest req,HttpServletResponse res)throws S ...

html

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

I find it puzzling why the alignment between Bootstrap buttons within the Angular 2 CLI project is not working as expected. To address this issue, I followed the instructions to create a new Angular 2 CLI app outlined here: https://angular.io/guide/quicks ...

htmlcssangularbootstrap-4

Using curl to retrieve information from a webpage

Before we proceed, let's take a look here, www.zedge.net/txts/4519/ This particular page contains numerous text messages. I want to create a script that can open each message and download it, however, I'm encountering some difficulties. Here i ...

phpcurlhtmlfetch

implementing jqBarGraph on my webpage

Hey there! I have been trying to add a graph to my HTML page for quite some time now. After doing some research, I discovered that using the jqBarGraph plug-in makes it easier to create the desired graph. Below you will find the code that I have on my webp ...

javascriptjqueryhtml

event fails to trigger on a fixed positioned element

Here's the code snippet I've been working with: if ($('body.page-service-map').length || $('body.page-contact').length) { $(document.body).append('<div class="black-overlay"></div>'); ...

cssz-index

Retrieving Form Validation Error Value in AngularJS

Incorporating AngularJS 1.2 RC2 and utilizing Bootstrap for CSS, I have constructed a straightforward form as shown below: <form class="form-horizontal" name="form" novalidate> <label class="col-lg-2 control-label" for="name">Name</labe ...

javascripthtmlformsangularjs

Sluggish performance in Core Image processing

My test application includes a ViewController, GLKView, and UISlider. The UISlider changes the value in the selected filter, but rendering the image is very slow. I'm unsure what is causing the slow rendering. Here is my code: Here is the test class ...

iosswiftrenderingglkview