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

Having trouble with table sorting in Jquery?

I am a beginner in the realm of Jquery and web programming. Recently, I attempted to implement the tablesorter jquery plugin for one of my projects but encountered issues with making it work properly. In search of a solution, I turned to Stack Overflow. C ...

javascriptjqueryhtmltablesorter

Instant access to an interactive online platform

Is it feasible to create a shortcut from a webpage to my desktop for quick access? For instance, if a dynamic web page has 15 documents and I want to easily create shortcuts to them on my desktop by clicking on each one. I understand this is a brief quest ...

javascripthtmlasp-classic

Leveraging the power of Bootstrap and JavaScript to implement a custom Toast feature

I am utilizing Bootstrap 4 to design Toasts, and I am presently developing a JavaScript function to generate a toast. My attempt to create elements within the JS file did not properly style it. index.html <!doctype html> <html lang="en"> ...

javascripthtml

Move your cursor over X or Y to alter the color of Y exclusively

I am currently designing a navigation bar that includes icons followed by the title of their respective pages (for example, an icon of a home followed by the text 'Home'). I would like to change the color of only(!) the icon from black (default) ...

htmlcsshover

Having trouble with displaying the modal dialog in Twitter Bootstrap 3?

There seems to be an issue with my Twitter Bootstrap modal as it is not rendering the dialog box correctly, and I'm puzzled about the reason behind this. HTML <p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Revamping Tab Styles with CSS

Currently, I am working on a mat tab project. The code snippet I am using is: <mat-tab-group> <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab> </mat-tab-group> If you want to see the liv ...

htmlcssangularangular-materialangular9

Issues arise when attempting to display Sphinx documentation containing SVG images on Internet Explorer 11

I have been working on building Sphinx documentation and incorporating a UML diagram generated as an SVG image using graphviz. The SVG file is embedded in the auto-generated HTML template from Sphinx. While the SVG displays perfectly fine on Chrome and Fi ...

htmlsvginternet-explorer-11python-sphinxgraphviz

Instructions for retrieving data from a weather API using JavaScript

Hello amazing Stackoverflow community! I need your help to figure out how to extract data from a weather REST API using JavaScript. I'm struggling to fetch the weather condition and date/time information from this API. { info: { _postman_i ...

javascripthtmlcssnode.js

Develop an exclusive "click-once" button for a webpage

Can anyone assist me in creating a "one-time clickable" button to launch my website? I've searched through numerous threads on Stack Overflow but haven't found a solution yet. ...

javascripthtmlcssbuttondom-events

Arranging divs with Bootstrap version 4

Is it necessary to specify the order for each screen size breakpoint when displaying 2 divs in different orders based on the screen size? <div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1"> <div class="order-xs-1 order-sm-1 order ...

htmlbootstrap-4

The submenu is not aligned directly under its parent item

The sub-menu is not appearing below the parent item as expected. I have tried removing and adding the 'absolute' property, but it doesn't seem to have any effect. Check out the JS Fiddle for reference: http://jsfiddle.net/42qg5/ HTML Code ...

htmlcss

Ensure that the floated element stretches to 100% height in order to completely fill the page

I'm working on achieving a height of 100% for the left sidebar so that it fills the page regardless of the size of the "main" div. Currently, it stops at the normal page height and doesn't expand further. Is there any way to make this work as i ...

javascriptjqueryhtmlcssheight

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

Verify Departure on External Links within Wordpress

Let me set the stage for you: We're dealing with a bank website here. So, whenever a user wants to click on an external link (could be to a Facebook page or a partner website), we need to have a notification box pop up saying "You are about to lea ...

javascriptphpjqueryhtmlwordpress

Is your PHP session_cache_limiter malfunctioning on Safari?

I've been working on perfecting the session management for my PHP-based online ordering system. I am pleased with how it currently functions, allowing users to navigate using the "back" button without causing any database issues. However, one thing t ...

phpsessioncachingsafari

Styling a div element in React

Just dipping my toes into the world of styling here, so bear with me. I'm currently working on a React app and attempting to bring an image from a file using the following code: import cup from './img/cup.png' My goal is to style it in co ...

cssreactjs

What method sits snugly between prepend() and append()?

Just a quick question I have. I am attempting to align an element with my target. Usually, we use prepend (before the target) and append (after the target). Is there something similar that allows us to position that element directly on top of what we are ...

javascripthtmljquerycssprepend

Achieving successful content loading through AJAX using the .load function

Our website features a layout where product listings are displayed on the left side, with the selected product appearing on the right side (all on the same page). Initially, when the page loads, the first product is shown on the right. Upon clicking a new ...

javascriptphpjqueryhtmlajax

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Exploring the process of assigning responses to questions within my software program

I am looking to display my question choices as radio buttons in a modal window. I have tried several solutions without success. Here is my question module: import questions from "./Data"; const QuestionModel = () => { return ( <div cl ...

javascripthtmlreactjs