[CSS] Customer focus / disabled style for select element
CSS for SELECT Element Style Customer Disabled focus
2023-09-14 09:00:46 时间
Because there is no parent selector in CSS, we'll need to add an additional element to assist us in providing a focus style. We'll also add it to our multiple select so that it applies in both scenarios. The placement is important because we can affect elements that follow another element easily in CSS which we'll see.
<div class="form-group"> <label for="select">Select</label> <div class="form-field select"> <select id="select" name="select">... </select> <span class="focus"></span> </div> </div>
.form-field { border-color: var(--color-default, color("default")); &:focus { @include field-focus; } &:disabled { @include field-disabled; } } .form-field.select { display: grid; align-items: center; grid-template-areas: "select"; position: relative; background-image: linear-gradient( to top, scale-color(color("white"), $lightness: -10%), color("white") 33% ); select, &::after { grid-area: select; } &:not(.select--multiple)::after { content: ""; width: 0.8em; height: 0.5em; background-color: var(--color-default, color("default")); justify-self: end; clip-path: polygon(100% 0%, 0 0%, 50% 100%); } select { z-index: 1; &[multiple] { padding-right: 0; } } .focus { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: inherit; border: 2px solid transparent; } select:focus + .focus { @include field-focus; } &--disabled { @include field-disabled; background-image: linear-gradient( to top, rgba(black, 0.08), rgba(white, 0) 33% ); } }
mixin:
@mixin field-focus { border-color: var(--field-focus, color("primary")); box-shadow: 0 0 0.35em -0.1em var(--field-focus, color("primary")); outline: 2px solid transparent; } @mixin field-disabled { border-color: var(--color-disabled-border, color("disabled")); background-color: var( --color-disabled-background, color("disabled-background") ); cursor: not-allowed; &, option { color: rgba(black, 0.45); } }
All the idea that use to focus is add new element which class is `focus`, styling it and positioning it order to complete focus style.
相关文章
- img垂直居中div - css样式
- CSS - 控制最后边框的隐藏或设置为none
- css ~ a标签占满父级元素
- CSS选择器的浏览器支持
- CSS预处理器之SASS用法指南
- [CSS] Customer focus / disabled style for select element
- [CSS3] Apply Image Filter Effects With CSS
- [CSS 3] Enabling CSS manipulation inside the shadow DOM using the part pseudo class
- [React] Using the classnames library for conditional CSS
- 前端学习 -- Html&Css -- 表格
- [Webpack + React] Import CSS Modules with TypeScript and webpack
- [CSS] Nest a grid within a grid
- 如何自定义SAP Spartacus店铺的购物车图表css风格
- 中间文字,两边横线css
- SharePoint远程调试CSS
- css伪类和伪元素的区别