CINXE.COM
Lesetipp: Updates to the customizable select API von Matthias Scharwies, 28.01.2025 13:50 – SELFHTML Forum
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="description" content="Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML "> <meta name="keywords" content="SELFHTML, Forum, SELF-Forum, self"> <meta name="DC.Publisher" content="SELFHTML Forum"> <meta name="DC.Identifier" content="message/show"> <meta name="DC.Language" content="de"> <meta name="application-name" content="SELFHTML | F"> <meta name="msapplication-TileImage" content="/images/s-Logo_kachel_144-60ee68b7173b95bf9b9f20bf731cc2f4.png?vsn=d"> <meta name="msapplication-TileColor" content="#3983ab"> <meta charset="UTF-8" content="Yy8RYg4icyoAFhAMZxt1LQAjXiUjJAMc7zy4AZBo6Grd5iFt2G6_bkWR" csrf-param="_csrf_token" method-param="_method" name="csrf-token"> <link rel="author" href="/humans.txt"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" title="SELFHTML Icon"> <link rel="apple-touch-icon" href="/images/s-Logo_60-e32184c74b1d2be9081b4e73162a21ef.png?vsn=d"> <link rel="apple-touch-icon-precomposed" href="/images/s-Logo_60-e32184c74b1d2be9081b4e73162a21ef.png?vsn=d"> <link rel="apple-touch-icon" sizes="76x76" href="/images/s-Logo_76-dc58e3a62d671479accf6a44d0e074dc.png?vsn=d"> <link rel="apple-touch-icon" sizes="120x120" href="/images/s-Logo_120-dbd2a36328e6341491c4a2e286b16e54.png?vsn=d"> <link rel="apple-touch-icon" sizes="152x152" href="/images/s-Logo_152-d7ac893e07c6a36d6c028f659583aa09.png?vsn=d"> <link rel="help" href="/help" title="Hilfe"> <link rel="search" href="https://forum.selfhtml.org/search" title="SELFHTML-Suche"> <link rel="stylesheet" href="/css/app-cfa00d0ae3b0d2d6c08d6aeadb3c1564.css?vsn=d" media="all" title="SELFHTML Forum Stylesheet"> <link rel="alternate" title="Atom-Feed (SELFHTML-Forum)" type="application/atom+xml" href="https://forum.selfhtml.org/self/feeds/atom"> <link rel="alternate" title="RSS-Feed (SELFHTML-Forum)" type="application/rss+xml" href="https://forum.selfhtml.org/self/feeds/rss"> <title>Lesetipp: Updates to the customizable select API von Matthias Scharwies, 28.01.2025 13:50 – SELFHTML Forum</title> </head> <body data-moderator="false" data-current-forum="self" data-controller="MessageController" data-action="show" class="messages nested-view forum-self show anonymous " id="message-nested"> <script nonce="ZopEwC7rKt0tHsQkV8M3UY_jpdzdlsUeC-T30YbZXeY">document.body.classList.add("js");</script> <header class="cf-top-bar"> <ul class="selflinks"> <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein">SELFHTML</a></li> <li><a href="//wiki.selfhtml.org/">Wiki</a></li> <li><a href="https://forum.selfhtml.org/">Forum</a></li> <li><a href="https://blog.selfhtml.org/">Blog</a></li> </ul> </header> <ul class="cf-personallinks"> <li id="user-not-signed-in"><img src="/uploads/default_avatar/thumb/missing.png"> nicht angemeldet</li> <li id="optionen-help"> <a href="/help"> <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1008 1200v160q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-160q0-14 9-23t23-9h160q14 0 23 9t9 23zm256-496q0 50-15 90t-45.5 69-52 44-59.5 36q-32 18-46.5 28t-26 24-11.5 29v32q0 14-9 23t-23 9h-160q-14 0-23-9t-9-23v-68q0-35 10.5-64.5t24-47.5 39-35.5 41-25.5 44.5-21q53-25 75-43t22-49q0-42-43.5-71.5t-95.5-29.5q-56 0-95 27-29 20-80 83-9 12-25 12-11 0-19-6l-108-82q-10-7-12-20t5-23q122-192 349-192 129 0 238.5 89.5t109.5 214.5zm-368-448q-130 0-248.5 51t-204 136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5-51-248.5-136.5-204-204-136.5-248.5-51zm768 640q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg> <span class="desc">Hilfe</span> </a> </li> <li id="optionen-my"> <a href="/login?return_to=1818558" rel="nofollow"> <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1312 896q0 26-19 45l-544 544q-19 19-45 19t-45-19-19-45v-288h-448q-26 0-45-19t-19-45v-384q0-26 19-45t45-19h448v-288q0-26 19-45t45-19 45 19l544 544q19 19 19 45zm352-352v704q0 119-84.5 203.5t-203.5 84.5h-320q-13 0-22.5-9.5t-9.5-22.5q0-4-1-20t-.5-26.5 3-23.5 10-19.5 20.5-6.5h320q66 0 113-47t47-113v-704q0-66-47-113t-113-47h-312l-11.5-1-11.5-3-8-5.5-7-9-2-13.5q0-4-1-20t-.5-26.5 3-23.5 10-19.5 20.5-6.5h320q119 0 203.5 84.5t84.5 203.5z"/></svg> <span class="desc">anmelden</span> </a> </li> <li id="optionen-myadmin"> <a href="/registrations/new" rel="nofollow"> <svg width="2048" height="1792" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M704 896q-159 0-271.5-112.5t-112.5-271.5 112.5-271.5 271.5-112.5 271.5 112.5 112.5 271.5-112.5 271.5-271.5 112.5zm960 128h352q13 0 22.5 9.5t9.5 22.5v192q0 13-9.5 22.5t-22.5 9.5h-352v352q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-352h-352q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h352v-352q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5v352zm-736 224q0 52 38 90t90 38h256v238q-68 50-171 50h-874q-121 0-194-69t-73-190q0-53 3.5-103.5t14-109 26.5-108.5 43-97.5 62-81 85.5-53.5 111.5-20q19 0 39 17 79 61 154.5 91.5t164.5 30.5 164.5-30.5 154.5-91.5q20-17 39-17 132 0 217 96h-223q-52 0-90 38t-38 90v192z"/></svg> <span class="desc">Benutzerkonto erstellen</span> </a> </li> </ul> <header class="cf-page-header"> <div class="logo"> <h1> <span>SELFHTML Forum - Ergänzung zur <a href="https://wiki.selfhtml.org">Dokumentation</a></span> <a class="home" href="/"><span>Übersicht</span></a> </h1> <a class="atom" href="https://forum.selfhtml.org/self/feeds/atom" title="Atom-Feed (SELFHTML-Forum)"><img alt="Atom-Feed (SELFHTML-Forum)" src="/images/feed-atom-597d8984f4b7e65486cb1bf0119cb3a1.svg?vsn=d"></a> <a class="rss" href="https://forum.selfhtml.org/self/feeds/rss" title="RSS-Feed (SELFHTML-Forum)"><img alt="RSS-Feed (SELFHTML-Forum)" src="/images/feed-rss-c704218f0d6f5cf652025a2349785fc7.svg?vsn=d"></a> <a class="donate" href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Spenden" title="Spenden"><img alt="Spenden" src="/images/donate-545b877a6cf7c3012754feafecb05137.svg?vsn=d"></a> </div> <nav class="quicklinks"> <ul> <li><a href="/self/new">neuer Beitrag</a></li> <li><a href="/">Übersicht</a></li> <li class="cf-dropdown" data-dropdown="yes"> <span class="anchor">Foren</span> <ul class="menu"> <li> <a href="/all">alle Foren</a> <a class="stats" href="/all/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> <li> <a href="/self">SELFHTML-Forum</a> <a class="stats" href="/self/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> <li> <a href="/weblog">SELFHTML-Blog</a> <a class="stats" href="/weblog/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> <li> <a href="/meta">Meta-Forum (read only)</a> <a class="stats" href="/meta/stats" title="Statistiken"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="14" viewBox="0, 0, 22, 14"> <use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#stats-icon"></use> </svg> </a> </li> </ul> </li> <li class="cites"> <a href="/cites">Zitatesammlung</a> </li> <li><a href="/search">suchen</a></li> <li><a href="/help">Hilfe</a></li> <li class="search"> <form action="/search" method="get" rel="nofollow"> <input type="hidden" name="search[sections][]" value="1"> <label class="visually-hidden" for="search-term-nav">Suchbegriff</label> <input type="search" id="search-term-nav" placeholder="suchen" name="search[term]"> </form> </li> </ul> </nav> <nav class="subnav cf-button-nav-list"> <ul> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558?rm=thread#m1818558">Thread-Ansicht</a></li> <li id="nachricht-feed-atom"><a href="/self/feeds/atom/264541">Atom-Feed</a></li> <li id="nachricht-feed-rss"><a href="/self/feeds/rss/264541">RSS-Feed</a></li> <li id="link-archiv"><a href="/self/archive">archivierte Beiträge</a></li> </ul> </nav> </header> <aside class="cf-motd-list"> <div class="cf-motd"><h3>noch 91 Tage: SELF-Treffen in Mannheim 2025</h3><p>SELFHTML wird 30 Jahre alt! Das wollen wir gebührend feiern! Weitere Informationen und eine Anmeldemöglichkeit gibt es in der <a href="https://forum.selfhtml.org/events/12" rel="nofollow noopener noreferrer">Veranstaltungs-Ankündigung</a>.</p> </div> </aside> <main> <div id="alerts-container"> </div> <div id="content"> <h1> <span class="author block" id="posting-author">Matthias Scharwies:</span> <span class="title" id="posting-title">Lesetipp: Updates to the customizable select API</span> </h1> <div class="cf-thread-list"> <article class="cf-thread posting tree " id="264541"> <header class="cf-message-header active " id="tree-m1818558"> <span class="message-icons"> </span> <span class="votes" title="Bewertung: keine Bewertung"> 0 </span> <span class="num-infos"><span class="num-msgs" title="ein Beitrag">1</span> </span> <a href="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558#m1818558"> <h2> Lesetipp: Updates to the customizable select API </h2> <div class="details"> <span class="author"> <span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span> </span> <time datetime="2025-01-28T12:50:47"> 28.01.2025 13:50 </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> css <li class="cf-tag"> html </ul> </div> </a> <div class="details"> </div> </header> </article> </div> <div> <article class="cf-thread-nested cf-thread-nested-root "> <div class="posting-nested cf-thread-message h-entry active"> <div class="posting-header"> <header class="cf-message-header " id="m1818558"> <a class="cf-thread-forum-plate" href="/self">SELF-Forum</a> <h2> <a href="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558#m1818558">Lesetipp: Updates to the customizable select API</a> </h2> <div class="details"> <span class="author"> <a class="user-link" href="/users/3833" title="Benutzer Matthias Scharwies"><span class="registered-user "><img alt="" class="avatar" loading="lazy" src="/uploads/users/avatars/000/003/833/thumb/avatar-2.png?v=63754317613"> Matthias Scharwies</span></a> </span> <span class="author-infos"> <a class="author-email" href="mailto:mscharwies@selfhtml.org"> <span>E-Mail-Adresse des Autors</span> <svg width="22" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#svg-email"></use></svg> </a> </span> <time datetime="2025-01-28T12:50:47"> <a href="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558#m1818558">28.01.2025 13:50</a> </time> <ul class="cf-tags-list-thread"> <li class="cf-tag"> <a href="/tags/css">css</a></li> <li class="cf-tag"> <a href="/tags/html">html</a></li> </ul> </div> <div class="details"> </div> </header> <div class="cf-voting-area top"> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <p class="cf-problematic-site"> <svg class="problematic-site-icon" title="problematische Seite" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons-2a02f859173f882011d80ff7161ff9aa.svg?vsn=d#svg-problematic-site"></use></svg> <a href="https://una.im/select-updates/" rel="nofollow noopener noreferrer">problematische Seite</a> </p> <div class="cf-posting-content e-content"> <p>Servus!</p> <p>Von una Kravetz: <a href="https://una.im/select-updates/" rel="nofollow noopener noreferrer">Updates to the customizable select API</a></p> <p>High-level overview of changes:</p> <ol> <li>::select-fallback-button was removed, and the button itself is now display: contents. This means, styles for the button should be put on the select element instead.</li> <li>The dropdown arrow icon was changed from select::after to select::picker-icon</li> <li>Checkmarks that indicate the selected option were changed from option::before to option::checkmark</li> <li><selectedoption> was renamed to <selectedcontent></li> <li>Many styles were removed from the user agent stylesheet, such as default shadows, border-radius, and font styles</li> <li>Options now are styled using flexbox instead of block layout</li> </ol> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">bildung.social/@selfhtml</a> </div> </div> <div class="posting-footer"> <div class="button-container"> <div class="message-links"> <div class="controls"> <a class="cf-btn" data-action="answer" href="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558/new" rel="nofollow">Antwort verfassen</a> <a class="cf-btn" data-action="answer" data-quote="yes" href="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558/new?with_quote=yes" rel="nofollow">Antwort mit Zitat verfassen</a> <a class="cf-btn" href="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558/flag" rel="nofollow">Beitrag melden</a> </div> </div> <div class="cf-voting-area bottom"> <form action="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558/downvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="Yy8RYg4icyoAFhAMZxt1LQAjXiUjJAMc7zy4AZBo6Grd5iFt2G6_bkWR"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-down " title="negativ bewerten" type="submit" disabled><span>negativ bewerten</span></button></form> <span class="votes" title="Bewertung: keine Bewertung"> – </span> <form action="/self/2025/jan/28/lesetipp-updates-to-the-customizable-select-api/1818558/upvote" class="cf-inline-form" method="post"><input name="_csrf_token" type="hidden" value="Yy8RYg4icyoAFhAMZxt1LQAjXiUjJAMc7zy4AZBo6Grd5iFt2G6_bkWR"><input type="hidden" name="f" value="self"><input type="hidden" name="r" value="message"><button class="vote-button vote-up " title="positiv bewerten" type="submit" disabled><span>positiv bewerten</span></button></form> <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln" class="infos"> <span>Informationen zu den Bewertungsregeln</span> </a> </div> </div> <nav class="forum-links"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/all">alle Foren</a></li> <li><a href="/self">SELFHTML-Forum</a></li> <li><a href="/login?return_to=1818558" rel="nofollow">anmelden</a></li> <li><a href="/registrations/new" rel="nofollow">Benutzerkonto erstellen</a></li> <li><a href="#tree-m1818558">Beitrag im Thread-Baum</a></li> </ul> </nav> </div> </div> </article> </div> </div> </main> <footer class="cf-footer"> <ul> <li>Seit 1995 – <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein">Die Energie des Verstehens</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Impressum">Impressum</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Impressum#Datenschutzbestimmungen">Datenschutz</a></li> <li>Software: <a href="https://github.com/ckruse/cforum_ex">Classic Forum</a> V5.7.23</li> <li class="sponsor"><a href="https://termitel.de/"><img alt="Termitel - Customer Care & Sales" src="/images/termitel-customer-care-and-sales-639585ae6087c14fa099c4e0e2e1660f.svg?vsn=d"></a></li> <li class="sponsor"><a href="https://www.appsignal.com/"><img alt="AppSignal" src="/images/appsignal-e3045e28946f0657d47096a4faf0e32c.svg?vsn=d"></a></li> </ul> </footer> <script nonce="ZopEwC7rKt0tHsQkV8M3UY_jpdzdlsUeC-T30YbZXeY"> window.MathJax = { displayAlign: "left", messageStyle: "none", showMathMenu: false, menuSettings: { CHTMLpreview: false }, tex2jax: { inlineMath: [['$$', '$$']], displayMath: [], preview: "none", processEscapes: true } }; </script> <script src="https://forum.selfhtml.org/mathjax/MathJax.js?config=TeX-MML-AM_CHTML" async></script> <script nonce="ZopEwC7rKt0tHsQkV8M3UY_jpdzdlsUeC-T30YbZXeY">window.userToken = "";</script> <script src="/js/app-8872306ecbaeb167e05bafc1840844c0.js?vsn=d"></script> </body> </html>