Click on the 'appearance' dropdown menu while using Safari or Chrome on a Mac computer

Struggling to achieve uniform appearance for the select box across all browsers and devices? It seems like IE 10 and Microsoft Edge are giving you trouble with the appearance property. Any suggestions on how to fix this issue would be greatly appreciated. Thank you!

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
}

.select {
  background: #fff;
  border-radius: 0;
}
<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>

htmlcssmacosgoogle-chrome

Answer №1

To achieve uniformity in appearance between the textbox and select box, you should choose a specific style (such as border: 1px solid #666666 to imitate the <input> element) and apply it to both the .textfield and .select classes simultaneously.

If desired, you can utilize JavaScript to implement this style only when the user is using a Mac operating system. (Refer to this answer for guidance.)

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
  border: 1px solid #666666;
}

.select {
  background: #fff;
  border-radius: 0;
}

.asterisk {
  color: #FF0004;
}
<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <label for="select">
      <nobr>Select<span class="asterisk">&#42;</span></nobr>
    </label>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>

Answer №2

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
  border: 1px solid #666666;
}

.select {
  background: #fff;
  border-radius: 0;
}

.asterisk {
  color: #FF0004;
}
<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <label for="select">
      <nobr>Select<span class="asterisk">&#42;</span></nobr>
    </label>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>

Answer №3

After receiving some recommendations, I decided to enhance the appearance of my select field by adding an image as a background. The results have been fantastic so far! To achieve this effect in your CSS code, simply incorporate the following:

  background: #fff;
  border-radius: 0;
  -webkit-appearance: none;
  /* **Consider using your own icon or image to replace the default down arrow** */
  background :url('http://via.placeholder.com/10x10') 95% no-repeat;
  background-color: #fff;
  background-position: right;
  background-size: 14px;

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

Instructions for submitting a form using Xcode

How can I automate the submission of a form in a webview? Here is my code: #import <Cocoa/Cocoa.h> #import <WebKit/WebKit.h> #import <WebKit/WebResourceLoadDelegate.h> @interface AppDelegate : NSObject <NSApplicationDelegate> @pro ...

htmlxcodeformswebview

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

htmlcssangularpopover

What is the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

javascriptjqueryhtmlcssselenium

The Dropdown Menu is displaying correctly in Chrome, but is being obscured by an image in Safari

While the Nav dropdown menu functions correctly in Chrome, an issue arises in Safari where the image covers the rest of the menu. This discrepancy between browsers is puzzling. Why does this problem only occur in Safari when it displays properly in Chrome? ...

javascripthtmlcssgoogle-chromesafari

Bootstrap: Ensuring vertical stacking of columns on mobile devices for responsive design

Here is the code snippet I am working with: <div class='carousel'> <div class='data-ng-repeat='{{ repeat }}'{% endif %}> <div class='col-xs-12 col-sm-3 vdivide valign-wrap' data-ng-repeat=&apos ...

csstwitter-bootstrap

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

javascriptjqueryhtmlcss

Unable to supersede CSS module styling using global or external stylesheets in React, Next.js, or React Native

I'm facing a challenge finding a solution to a basic issue. I have a component that is initially styled using a class from a *.module.css file. However, I want to replace this style with one from a global stylesheet or another stylesheet but I can&apo ...

javascriptcssreactjsnext.jsjsx

Javascript variable decrement failure

One of the challenges I am facing is with a button in HTML that is set by AJAX to create a new tr element. I have successfully built a function (code provided below) to add it, but now I want to include a counter to keep track of how many rows I have. The ...

javascriptjqueryhtmlvariables

Adjusting Google Maps API v3 Autocomplete dropdown width with JavaScript and SASS to match input field dimensions

I am facing an issue where the autocomplete dropdown (div with class "pac-container") is consistently 4 pixels shy of aligning perfectly with the right side of the input field. It looks like this: https://i.sstatic.net/Y0oq1.png Below is the HTML code: ...

javascriptcssgoogle-mapsgoogle-maps-api-3sass

Tips for terminating a VueJS application on localhost:8080 for MacOS users

My environment: Operating on MacOS Mojave Using pre-existing templates from VueJS, I generated a VueJS application with the following prompts: vue init pwa frontend ? Project name frontend ? Project short name: should be less than 12 characters to avoid ...

node.jsmacosexpressvue.jslsof

JavaScript, webpage constantly reloading

Every time I try to interact with the form on this page, it automatically refreshes without any input from me. <html> <head> </head> <body> <form id="someForm"> <input id="someInput" /><button>Send&l ...

javascripthtml

What could be causing this navigation item to vanish in Firefox?

Check out this link: http://jsfiddle.net/Nvntm/1/ In Firefox and some other browsers, the "Support" navigation item disappears while the other three remain. Why does this happen? Is there something incorrect in my code? ...

htmlcsscross-browser

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Currently, I am experimenting with Jquery to dynamically change the classes of bootstrap buttons when they are clicked. However, I have encountered a limitation while using toggleClass. The issue is that I am only able to toggle between two classes, whic ...

javascriptjquerycssbootstrap-4

What is the best approach for extracting multiple images from a URL and inserting them individually into separate divs using JavaScript?

Is there a way to elegantly display images horizontally on my website without them stacking on top of each other? I want each image to be placed side by side in a specific space for a beautiful layout. <!DOCTYPE html> <html> <head ...

javascripthtmlcss

The getElementByID function will return null in this instance, as it has not been loaded

Hello everyone, I am facing an issue while trying to access an element by its ID in JavaScript as it keeps returning null. This problem arises because the element is not fully loaded when the DOM is initially created, due to a plugin called Restrict Conte ...

javascripthtmldomloadgetelementbyid

The hyperlink does not display any text indicating an issue in the Wave accessibility evaluation tool

On my HTML page, there is a certain code snippet: <a href="example.com"><i class="myclass"></i></a> <a href="http://www.google.com" class="cart visible-xs"><i class="t-icon t-icon-cart-xs-2"></i></a> Des ...

htmlhyperlinkaccessibility

CSSTYLE - the option remains independent of standard values

Below is the code I am currently working with: @include component(elementList) { tr { td { width: 50%; background: $darkGray; padding: 5px; text-align: center; } @include option(heading) { padding: 5px; ...

csssass

having difficulty uploading an image on wampserver

I am seeking advice and assistance with an issue I am facing. I am attempting to upload an image, but Wampserver keeps displaying the following error message (Warning: POST Content-Length of 80237 bytes exceeds the limit of 750 bytes in Unknown on line 0 F ...

ajaxhtml

Exploring the JSON object and dynamically incorporating elements into it is my goal as I navigate through AngularJS

I'm seeking a way to display the entire JSON data in a tabular format, with the ability to dynamically loop through any additional values that are added. Here is an example of my current JSON: $scope.tableContent = [ { id: 1, ...

javascripthtmlangularjsjson

Ensure that the CSS fade-in effect occurs every time the element is clicked, not just the first time

Is it possible to make text fade in on every click instead of just the first time by using CSS transitions and JavaScript? My current progress: <style> #data { transition: .7s; } </style> <h1 id="data"></h1> <a hr ...

javascripthtml