Mac系统Chrome浏览器中<select>标签点击后变黑的样式问题解决方案咨询

Hey there! I’ve dealt with this exact quirk in Mac Chrome before—native <select> elements get that annoying black background when clicked because of default WebKit styles. Let’s get it fixed to match your target style:

Why This Happens #

Mac Chrome applies built-in WebKit styles to <select>s when they’re focused/active, which includes that dark background. We just need to override those defaults with custom CSS.

Step-by-Step Solution #

First, reset the default browser appearance and add your base styles to match your target look:

select {
  /* Strip away default browser styling */
  -webkit-appearance: none;
  appearance: none;
  
  /* Add your custom base styles (adjust these to match your target) */
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

Next, fix the focus state that causes the black background:

select:focus {
  /* Remove default outline and override WebKit's black focus ring */
  outline: none;
  -webkit-focus-ring-color: transparent;
  
  /* Optional: Add your custom focus highlight (matches modern UI patterns) */
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

Optional: Custom Dropdown Arrow #

Since we used appearance: none, the default dropdown arrow will disappear. Add this to bring back a custom arrow that fits your target style:

select {
  position: relative;
  padding-right: 40px; /* Make space for the custom arrow */
}

select::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Ensure the arrow doesn't block clicks */
  color: #666666;
  font-size: 14px;
}

Testing #

Save these styles and refresh your page in Mac Chrome—you should no longer see the black background when clicking the <select>, and it should match your target design perfectly.

内容的提问来源于stack exchange，提问作者loveloper.dev