Safari 27 introduces Customizable Select, allowing developers to apply `appearance: base-select` CSS to fully style the native HTML `<select>` element and its picker, including custom HTML content inside `<option>` elements, while retaining built-in accessibility and form semantics.
• Eliminates the need for JavaScript-heavy custom dropdown libraries — a fully branded, accessible select control is now achievable with pure HTML and CSS
• Apps using WKWebView to render forms or product pickers can deliver polished, on-brand UI without sacrificing assistive technology support
• The new `::picker`, `::checkmark`, and `::picker-icon` pseudo-elements give fine-grained styling control that was previously impossible with the native select element
Demonstrates a WKWebView-hosted HTML page that uses the new `appearance: base-select` CSS to render a fully custom-styled select control with images and subtext inside each option.
import SwiftUI
import WebKit
struct CustomSelectDemoView: UIViewRepresentable {
func makeUIView(context: Context) -> WKWebView {
let config = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: config)
webView.loadHTMLString(Self.htmlContent, baseURL: nil)
return webView
}
func updateUIView(_ uiView: WKWebView, context: Context) {}
static let htmlContent = """
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: -apple-system, sans-serif; padding: 24px; background: #f2f2f7; }
h2 { color: #1c1c1e; }
/* Enable customizable select on the button */
select {
appearance: base-select;
background: #ffffff;
border: 1.5px solid #c7c7cc;
border-radius: 12px;
padding: 10px 14px;
font-size: 16px;
color: #1c1c1e;
width: 100%;
}
/* Enable customizable select on the picker popup */
select::picker(select) {
appearance: base-select;
border-radius: 16px;
overflow: hidden;
border: 1px solid #e5e5ea;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
font-size: 15px;
}
option .emoji { font-size: 28px; }
option .label { font-weight: 600; color: #1c1c1e; }
option .sub { font-size: 12px; color: #8e8e93; }
option:hover, option:focus {
background: #f2f2f7;
}
/* Style the built-in checkmark pseudo-element */
select::checkmark {
color: #007aff;
font-weight: 700;
}
</style>
</head>
<body>
<h2>Choose a Fruit</h2>
<select name="fruit">
<option value="apple">
<span class="emoji">🍎</span>
<span>
<span class="label">Apple</span><br>
<span class="sub">Crisp & sweet</span>
</span>
</option>
<option value="banana">
<span class="emoji">🍌</span>
<span>
<span class="label">Banana</span><br>
<span class="sub">Soft & tropical</span>
</span>
</option>
<option value="grape">
<span class="emoji">🍇</span>
<span>
<span class="label">Grape</span><br>
<span class="sub">Small & juicy</span>
</span>
</option>
</select>
</body>
</html>
"""
}
struct ContentView: View {
var body: some View {
VStack {
Text("WebKit Customizable Select")
.font(.headline)
.padding(.top)
CustomSelectDemoView()
}
}
}Liquid Glass is Apple's new material and visual design language introduced in iOS 27, bringing translucent, refractive glass-like surfaces to system and custom UI elements. It replaces the frosted vibrancy aesthetic with a more dynamic, depth-aware material that responds to content beneath it.
PaperKit is Apple's full-featured canvas framework — previously internal-only — now publicly available in iOS/macOS/visionOS 27. It powers the drawing and markup experience in Notes, Preview, and Freeform, giving developers access to a complete pencil, shapes, images, and text canvas with a rich data model.
Xcode 27 introduces a fully customizable toolbar and theme system, untitled scratch projects, coding agent integration directly in the editor, and the new Device Hub for evaluating apps across simulators and physical devices side-by-side.
In-depth guide
SwiftUI & Liquid Glass in iOS 27 →appearance: base-select is a progressive enhancement — always verify fallback rendering on older OS versions. Custom HTML inside <option> (images, subtext) is only rendered in the picker, not in the collapsed button. CSS Grid/Flexbox inside the ::picker pseudo-element requires Safari 27+; earlier Safari silently drops the styles.
Requires Safari 27 or a WKWebView running on iOS 27+. The CSS `appearance: base-select` property is ignored in older WebKit versions, which fall back to the standard system select UI.
iOS 27 introduces new SwiftUI drag and drop APIs including reorderable, reorderContainer, dragContainer, and configuration modifiers that enable reordering within and across collections, multi-item drag, and fine-grained control over how data is transferred during drag and drop operations.