diff --git a/third_party/blink/renderer/core/css/resolver/style_adjuster.cc b/third_party/blink/renderer/core/css/resolver/style_adjuster.cc
index 18d16d34d02cb8..dbcd81b740aaa7 100644
--- a/third_party/blink/renderer/core/css/resolver/style_adjuster.cc
+++ b/third_party/blink/renderer/core/css/resolver/style_adjuster.cc
@@ -487,6 +487,10 @@ static void AdjustStyleForMarker(ComputedStyleBuilder& builder,
 
 static void AdjustStyleForHTMLElement(ComputedStyleBuilder& builder,
                                       HTMLElement& element) {
+  if (builder.HasBaseSelectAppearance()) {
+    builder.SetInBaseSelectAppearance(true);
+  }
+
   // <div> and <span> are the most common elements on the web, we skip all the
   // work for them.
   if (IsA<HTMLDivElement>(element) || IsA<HTMLSpanElement>(element)) {
diff --git a/third_party/blink/renderer/core/css/resolver/style_cascade.cc b/third_party/blink/renderer/core/css/resolver/style_cascade.cc
index 3b303cc40a5910..3215ddee4d7c4d 100644
--- a/third_party/blink/renderer/core/css/resolver/style_cascade.cc
+++ b/third_party/blink/renderer/core/css/resolver/style_cascade.cc
@@ -1713,27 +1713,11 @@ bool StyleCascade::ResolveAppearanceAutoBaseSelectInto(
   }
   LookupAndApply(appearance, resolver);
 
-  // The UA stylesheet only uses -internal-appearance-auto-base-select(),
-  // on select elements, which is currently the only element which supports
-  // appearance:base-select.
-  CHECK(IsA<HTMLSelectElement>(state_.GetUltimateOriginatingElementOrSelf()));
-  bool has_base_appearance = state_.StyleBuilder().HasBaseSelectAppearance();
-  if (state_.IsForPseudoElement()) {
-    CHECK_EQ(state_.GetPseudoElement()->GetPseudoId(), kPseudoIdAfter)
-        << " -internal-appearance-base-select() is only supported on "
-           "select::after right now.";
-    // There is a rule in the UA sheet for select::after which uses
-    // -internal-appearance-auto-base-select(), so for that rule we have to
-    // account for this here by checking the style of the select element instead
-    // of this state_ which is for ::after.
-    // Both state_.LayoutParentStyle() and
-    // state_.GetElement().GetComputedStyle() seem to have the correct
-    // appearance value set.
-    // TODO(crbug.com/1511354): LayoutParentStyle might not be the right thing
-    // to call for all pseudo-elements.
-    has_base_appearance = state_.LayoutParentStyle()->EffectiveAppearance() ==
-                          ControlPart::kBaseSelectPart;
-  }
+  // Note that the InBaseSelectAppearance() flag is set by StyleAdjuster,
+  // which hasn't happened yet. Therefore we also need to check
+  // HasBaseSelectAppearance() here.
+  bool has_base_appearance = state_.StyleBuilder().HasBaseSelectAppearance() ||
+                             state_.StyleBuilder().InBaseSelectAppearance();
 
   if (has_base_appearance) {
     // We want to the second argument.
diff --git a/third_party/blink/renderer/core/html/resources/customizable_select.css b/third_party/blink/renderer/core/html/resources/customizable_select.css
index a86a8c738930e3..47a2efb4ad9b28 100644
--- a/third_party/blink/renderer/core/html/resources/customizable_select.css
+++ b/third_party/blink/renderer/core/html/resources/customizable_select.css
@@ -8,6 +8,10 @@
 
 @namespace "http://www.w3.org/1999/xhtml";
 
+select:not(:-internal-list-box) {
+  font: -internal-appearance-auto-base-select(-webkit-small-control, inherit);
+}
+
 /* These rules are intended to apply to appearance:base-select when the author
  * provides a child <button> element. They still apply when appearance computes
  * to auto, but the values provided in the
@@ -111,6 +115,7 @@ select:not(:-internal-list-box) option {
   min-inline-size: 24px;
   min-block-size: max(24px, 1.2em);
   align-content: center;
+  font-weight: -internal-appearance-auto-base-select(normal, inherit);
 }
 
 
@@ -160,6 +165,7 @@ select:not(:-internal-list-box) optgroup {
 /* This can be merged with the :-internal-list-box rule in html.css */
 select:not(:-internal-list-box) optgroup option {
   padding-inline-start: 20px;
+  font-weight: normal;
 }
 
 /* These styles are copied from optgroup's label attribute inline style properties */
diff --git a/third_party/blink/renderer/core/style/computed_style_extra_fields.json5 b/third_party/blink/renderer/core/style/computed_style_extra_fields.json5
index 59240303572453..b47b784f42c46a 100644
--- a/third_party/blink/renderer/core/style/computed_style_extra_fields.json5
+++ b/third_party/blink/renderer/core/style/computed_style_extra_fields.json5
@@ -1307,5 +1307,13 @@
       default_value: "false",
       inherited: false,
     },
+    {
+      name: "InBaseSelectAppearance",
+      inherited: true,
+      field_template: "primitive",
+      type_name: "bool",
+      field_group: "*",
+      default_value: "false",
+    },
   ],
 }
diff --git a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
index 2bcf247a5637b0..00e9ec7d13de9f 100644
--- a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
+++ b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -4,9 +4,6 @@
 
 .customizable-select-button, .customizable-select-popover {
   box-sizing: border-box;
-  /* TODO(crbug.com/1511354): Make the UA stylesheet use something standardized
-   * instead of -webkit-small-control. */
-  font: -webkit-small-control;
 }
 
 .customizable-select-popover {
diff --git a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
new file mode 100644
index 00000000000000..832331f29c76d0
--- /dev/null
+++ b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class="customizable-select-button open" popovertarget=popover id=button>
+  <span class=customizable-select-selectedoption>one</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div class="customizable-select-option selected">one</div>
+  <div class=customizable-select-option>two</div>
+</div>
+
+<style>
+* {
+  font-style: italic !important;
+  font-weight: bold !important;
+  font-stretch: expanded !important;
+  font-size: 13px !important;
+  font-family: monospace !important;
+}
+</style>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
new file mode 100644
index 00000000000000..7d03ce1d8bcaaa
--- /dev/null
+++ b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-21;totalPixels=0-8">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="/whatwg/html/issues/9799">
+<link rel=match href="select-appearance-font-inheriting-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+body {
+  font-style: italic;
+  font-weight: bold;
+  font-stretch: expanded;
+  font-size: 13px;
+  font-family: monospace;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.bless();
+  document.querySelector('select').showPicker();
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html
index 9fd5af1bd291f2..51e3298ccc64e3 100644
--- a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html
+++ b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-16;totalPixels=0-6">
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-6">
 <link rel=author href="mailto:jarhar@chromium.org">
 <link rel=help href="/whatwg/html/issues/9799">
 <link rel=match href="select-appearance-picker-select-border-ref.html">
diff --git a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html
index d3a1eff3f7684b..eedbf1e7a440ae 100644
--- a/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html
+++ b/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-16;totalPixels=0-6">
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-6">
 <link rel=author href="mailto:jarhar@chromium.org">
 <link rel=match href="select-popover-exit-animation-ref.html">
 <script src="/resources/testdriver.js"></script>