styling 相关问题

如何更改<select>的<optgroup>标签的样式？

我的应用程序中有一个带有选项组的简单选择框。 沃尔沃 我的应用程序中有一个带有选项组的简单选择框。 <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> ---- ---- ---- </select> 在浏览器中显示时，选项组标签以粗体和斜体显示；我希望它在没有任何这些样式的情况下显示。 在大多数浏览器上（在最新的 IE 和 FF 上测试），您可以仅使用 CSS 轻松更改 optgroup 的标签： select optgroup{ background: #000; color: #fff; font-style: normal; font-weight: normal; } 显然，您可以设置任何类名，而不是选择 html 标签。 顺便说一句，正如其他答案所说，仍然有很少的 CSS 选项可与选择框一起使用，并且许多网站管理员使用 user949847 给出的方法覆盖它们。但上面的代码应该足以满足您的需求。 不幸的是，选择框是少数可以使用 CSS 添加很少样式的东西之一。您通常会受限于浏览器的呈现方式。 例如，在 chrome 中看起来像这样： Firefox 中是这样的： Firefox 使用此规则设置标签样式： optgroup:before { content: attr(label); display: block; } 您可以覆盖它。 对于规避样式选项组问题的不同方法，我建议使用禁用选项。 <option disabled>[group label]</option> 您可以通过例如来尝试一下造型。 <style> [disabled] { color:#000; background-color:#CCC } </style> 您可以仅使用 CSS 来设置选择框的样式，这需要一种解决方法： 首先，用 div 包围它并给它一个类： <div class="selectStyle"> <select> <option>First Option</option> <option>Second Option</option> </select> </div> 然后确保使用 css 以某种方式设置选择元素的样式： .selectStyle select { background: transparent; width: 250px; padding: 4px; font-size: 1em; border: 1px solid #ddd; height: 25px; } 然后你设置 div 的样式： .selectStyle { width: 235px; height: 25px; overflow: hidden; background: url(yourArrow.png) no-repeat right #ccc; } 您只能为 Firefox 设置 <optgroup> 标签的样式，如下所示 optgroup[label] { color: grey; font-style: inherit; font-weight: 300; text-shadow: none } 您可以放弃使用 label 属性，并将禁用的 <option> 设置为 <optgroup> 中的第一个元素，然后设置此选项的样式。 <select> <option>1. One</option> <option>2. Two</option> <optgroup> <option disabled style="background:#dfb;color:#555;position:relative;top:-0.7em">3. Three</option> <option>3.1 Three dot one</option> <option>3.2 Three dot two</option> </optgroup> <option>4. Four</option> </select> 额外提示： 如果您本身不需要<optgroup>，则变体只是使用禁用的选项，在一定程度上将通过在列表中创建部分来视觉上模拟选项组。 出于美观原因，如果您在 optgroup 中使用禁用选项，我建议使用 position:relative;top:-0.7em 稍微向上移动它。 <style> .select2-container--bootstrap .select2-results__group { color: inherit; font-size: inherit; font-weight:bold; padding: 6px 4px; } .select2-results__group{ /* put your style here */ }

如何使用与 GitHub 完全相同的样式将 Markdown 文件导出为 PDF？

我花了一整天的时间试图弄清楚这一点，但我做不到。我找不到我正在寻找的解决方案。 我正在为进入我的项目的新开发人员准备一些 .md wiki 文档，我想...

单个console.log()中的多种颜色样式？

我有一个十六进制值数组， “颜色”：[“#d5dd90”，“#e6bb45”，“#ef9770”] 我可以像这样注销这些： 颜色.forEach((值)=>{ console.log('%cABC', `

如何根据设备大小渲染不同的组件？

我正在寻找构建一个断点为 1024 的响应式应用程序。 当用户登录/注册时，将有几个问题需要回答。 在移动设备上，这将呈现为关于...的一个问题

如何使用React Native元素调整输入的填充

我想知道如何调整InputContainer中的填充，并剪切下划线和文本之间的空间。 准确地说，我想在

有谁知道如何在<select>

有谁知道如何在选项标签中添加上标 24日

javascript 控制台中的样式链接

我的网站上有一条带有链接的console.log消息。 样式有效，但链接仍为白色背景上的黑色字体。 我可以改变吗？ $(函数() { var t = navigator.userAgent.

如何在 Qt 中的弹出窗口小部件上创建平滑的圆角

我有一个带有 windowsflag Qt::Popup 设置的小部件，我正在尝试创建平滑的圆角。 我尝试使用样式表，但角的透明部分变成黑色。一样的

react-native-mapbox-gl / 地图如何更改样式？

我在文档中看到了分层。 https://github.com/react-native-mapbox-gl/maps#layers 但我不明白如何改变建筑物和道路的颜色。以及如何更改标签中的文本。还有

基于另一种动画样式的WPF按钮样式

我目前正在学习 WPF 动画。 目前我有这个按钮样式： <Setter Property="FontFamily" Value="{DynamicResource </desc> <question vote="0"> <p>我目前正在学习 WPF 动画。</p> <p>目前我有这个按钮样式：</p> <pre><code>&lt;Style TargetType=&#34;Button&#34;&gt; &lt;Setter Property=&#34;FontFamily&#34; Value=&#34;{DynamicResource DefaultFont}&#34; /&gt; &lt;Setter Property=&#34;MinHeight&#34; Value=&#34;{DynamicResource MinHeight}&#34; /&gt; &lt;Setter Property=&#34;Background&#34; Value=&#34;{DynamicResource C4}&#34; /&gt; &lt;Setter Property=&#34;Template&#34;&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType=&#34;{x:Type Button}&#34;&gt; &lt;Grid SnapsToDevicePixels=&#34;True&#34;&gt; &lt;Border x:Name=&#34;Border&#34; BorderThickness=&#34;0&#34; CornerRadius=&#34;{DynamicResource Radius}&#34; BorderBrush=&#34;{TemplateBinding BorderBrush}&#34;&gt; &lt;Border.Background&gt; &lt;SolidColorBrush x:Name=&#34;borderBackground&#34; Color=&#34;{StaticResource Col5}&#34; /&gt; &lt;/Border.Background&gt; &lt;ContentPresenter x:Name=&#34;Content&#34; VerticalAlignment=&#34;Center&#34; HorizontalAlignment=&#34;Center&#34; RecognizesAccessKey=&#34;True&#34; /&gt; &lt;/Border&gt; &lt;/Grid&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property=&#34;IsMouseOver&#34; Value=&#34;True&#34;&gt; &lt;Setter Property=&#34;BorderBrush&#34; TargetName=&#34;Border&#34; Value=&#34;Black&#34; /&gt; &lt;Trigger.EnterActions&gt; &lt;BeginStoryboard x:Name=&#34;beginStoryboard&#34;&gt; &lt;Storyboard&gt; &lt;ColorAnimation Storyboard.TargetName=&#34;borderBackground&#34; Storyboard.TargetProperty=&#34;Color&#34; To=&#34;{StaticResource Col2}&#34; Duration=&#34;0:0:0.2&#34;&gt; &lt;/ColorAnimation&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/Trigger.EnterActions&gt; &lt;Trigger.ExitActions&gt; &lt;RemoveStoryboard BeginStoryboardName=&#34;beginStoryboard&#34; /&gt; &lt;BeginStoryboard x:Name=&#34;e&#34;&gt; &lt;Storyboard&gt; &lt;ColorAnimation Storyboard.TargetName=&#34;borderBackground&#34; Storyboard.TargetProperty=&#34;Color&#34; To=&#34;{StaticResource Col5}&#34; Duration=&#34;0:0:0.2&#34;&gt; &lt;/ColorAnimation&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/Trigger.ExitActions&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Style.Resources&gt; &lt;Style TargetType=&#34;Border&#34;&gt; &lt;Setter Property=&#34;CornerRadius&#34; Value=&#34;{DynamicResource Radius}&#34; /&gt; &lt;/Style&gt; &lt;/Style.Resources&gt; &lt;/Style&gt; </code></pre> <p>如您所见，这种风格应该做一些事情：</p> <ul> <li>应用默认值 <pre><code>FontFamily</code></pre>、<pre><code>MinHeight</code></pre> 和 <pre><code>Background</code></pre>；</li> <li>使用 <pre><code>ColorAnimation</code></pre> 动画鼠标进入和鼠标离开效果。颜色被定义为具有 Col1、Col2 等名称的资源。</li> </ul> <p>一切正常（即使我怀疑这种风格可以用更简洁的方式重写，但我需要指出正确的方向）。</p> <p>我的问题是：我需要基于这个主样式创建另一个样式，所以我写了类似的内容：</p> <pre><code>&lt;Style TargetType=&#34;Button&#34; x:Key=&#34;AccentOnMouseOver&#34; BasedOn=&#34;{StaticResource {x:Type Button}}&#34;&gt; &lt;Style.Triggers&gt; &lt;Trigger Property=&#34;IsMouseOver&#34; Value=&#34;True&#34;&gt; &lt;Setter Property=&#34;BorderBrush&#34; Value=&#34;DarkGreen&#34;/&gt; &lt;Setter Property=&#34;BorderThickness&#34; Value=&#34;1&#34; /&gt; &lt;/Trigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; </code></pre> <p>不幸的是，这不起作用（应用了基本样式，但没有 <pre><code>BorderBrush</code></pre> 颜色）。 如何使用背景<pre><code>ColorAnimation</code></pre>编写基本样式，然后使用另一种样式派生，添加其他<pre><code>Triggers</code></pre>？</p> <p>解决方案是复制并粘贴整个基本样式，添加 x:Key 并编辑我需要的属性，但我想要更干净的东西（这样，如果我更改动画部分，它将应用于所有派生样式） .</p> <p>非常感谢任何帮助。</p> </question> <answer tick="false" vote="0"> <p>主要错误是对元素模板的逻辑及其与样式的交互的错误理解。</p> <ol> <li><p>在您的示例中，主边框显示边框，但它有一个“硬”指定值：<pre><code>&lt;Border x:Name=&#34;Border&#34; BorderThickness=&#34;0&#34;</code></pre>。至少，您需要将其更改为 <pre><code>&lt;Border x:Name=&#34;Border&#34; BorderThickness=&#34;{TemplateBinding BorderThickness}&#34;</code></pre>。</p> </li> <li><p>“MouseOver”状态的边框颜色在模板触发器中设置：</p> </li> </ol> <pre><code> &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property=&#34;IsMouseOver&#34; Value=&#34;True&#34;&gt; &lt;Setter Property=&#34;BorderBrush&#34; TargetName=&#34;Border&#34; Value=&#34;Black&#34; /&gt; </code></pre> <p>因此，在这种状态下，对父元素属性的绑定将不再起作用（其优先级低于模板触发setter）：<pre><code>&lt;Border x:Name=&#34;Border&#34; ... BorderBrush=&#34;{TemplateBinding BorderBrush}&#34;&gt;</code></pre>。因此，对于这种状态，为父元素的属性设置值是没有意义的。</p> <p>您不能同时为一个属性设置多个值。因此，如果您稍后需要在使用元素的位置触发同一属性的更改，您应该想出某种机制来禁用模板中的触发器。</p> </answer> </body></html>

如何根据不同数据帧中的列的值突出显示一个数据帧中的行或字符串？

我希望能够从数据帧的一列中获取值，并在另一个数据帧中找到完全相同的值，以突出显示整行或仅突出显示字符串（无论哪种更容易/可能）。 数据...

CSS 媒体查询未显示所需的输出

当视口大于992px时，我想在以下两个实例中的菜单元素下显示一条灰线： 当页面被主动访问时，我希望线路保持在 pl...

使用 maatwebsite/excel 版本 3.1 直接从 laravel excel 中的数据库导出数据时，工作表样式不起作用

我尝试了很多方法来设计我的标题，但没有任何效果。我尝试了文档中给出的每种方法，也尝试了来自多个站点的多种方法，但样式现在在 Excel 工作表中可见。 使用这个包：&q...

在SolidJs中让Canvas填充父级

我正在使用 SolidJs 并使用 HopeUi 来处理某些组件。 我使用 HopeUi 中的网格组件，我想用画布组件填充其中一个网格。 我的应用程序的代码目前看起来...

有条件地渲染仅用作正文背景元素的图像，这样它们就不会在内容太少的页面上添加高度

我有一些 NextJS 图像组件到 NextJS 组件的 RootLayout 中，并给它们负 z 索引并将它们绝对定位，因为某些内容是动态的，我希望放置它们......

MudBlazor UI 库颜色

我真的很想更改 MudBlazor UI 组件的颜色。但是，我似乎无法覆盖默认样式。有人可以帮我吗？

如何使用openpyxl设置刻度标签的字体？

我使用 openpyxl 创建了一个 Excel 图表。现在我尝试配置 x 轴刻度标签的字体。怎样做才正确呢？ a）这是我当前的代码： 从 openpyxl 导入工作簿 来自 openp...

Angular ngx-material-timepicker 无法自定义

我尝试使用 ngx-material-timepicker ，如下面的代码，但我无法更改任何 CSS 类 我正在关注此链接 https://www.npmjs.com/package/ngx-material-timepicker 这是我的代码 我尝试使用 ngx-material-timepicker ，如下面的代码，但我无法更改任何 CSS 类 我正在关注此链接https://www.npmjs.com/package/ngx-material-timepicker 这是我的代码 <div class="clock"> <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly /> <ngx-material-timepicker [appendToInput]="true" [disableAnimation]="true" [theme]="oktTheme" (timeSet)="onTimeset($event)" #fullTime ></ngx-material-timepicker> </div> 这是ts代码 oktTheme = { container: { bodyBackgroundColor: "#424242", buttonColor: "#fff" }, dial: { dialBackgroundColor: "#555" }, clockFace: { clockFaceBackgroundColor: "#555", clockHandColor: "#01806b", clockFaceTimeInactiveColor: "#fff" } }; 通过将自定义类添加到指令并使用内部指令类将其设置在 style.scss 中来解决此问题 html <div class="clock"> <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly /> <ngx-material-timepicker [appendToInput]="true" [disableAnimation]="true" [theme]="oktTheme" [timepickerClass]="'custome-class'" (timeSet)="onTimeset($event)" #fullTime ></ngx-material-timepicker> </div> style.scss .custome-class { direction: ltr; .timepicker__header { padding: 0px 30px !important; border-top-right-radius: 12px; border-top-left-radius: 12px; } .timepicker-dial__control { font-size: 20px !important; } .timepicker-dial { border-bottom: 1px solid rgba(0, 0, 0, 0.12); display: flex; justify-content: center; height: 44px; } } 将其放入您的 SCSS 文件中（在 app.component.scss 或您的特定组件中） ::ng-deep ngx-material-timepicker-content{ --body-background-color: #fff; --primary-font-family: 'Roboto',sans-serif; --button-color: #c6ff00 !important; --dial-active-color: #fff; --dial-inactive-color: rgba(255, 255, 255, .5); --dial-background-color: #c6ff00 !important; --dial-editable-active-color: #c6ff00 !important; --dial-editable-background-color: #fff; --clock-face-time-active-color: #fff; --clock-face-time-inactive-color: #6c6c6c; --clock-face-inner-time-inactive-color: #929292; --clock-face-time-disabled-color: #c5c5c5; --clock-face-background-color: #f0f0f0; --clock-hand-color: #c6ff00 !important; } 更改标题、按钮和时钟指针的颜色。 .ngx-picker-custom { direction: ltr; .timepicker__header { background-color: var(--color-cyan)!important; } .timepicker-button{ color: var(--color-cyan)!important; } .clock-face__clock-hand, .clock-face__number > span.active, .clock-face__clock-hand{ background-color: var(--color-cyan)!important; } .clock-face__clock-hand_minute:before { border-color: var(--color-cyan)!important; } }

使 <a> 标签位于 div 右侧

我正在尝试制作一个浮岛导航栏，我希望所有链接都转到我的容器的右侧，但它不起作用。我尝试将它放入我的父容器中，但它只是弄乱了其他容器......

在 MUI v5 中，如何在开发工具 DOM 中调试/查找特定元素/样式/类？

在 MUI v4 中，检查 DOM 并隔离该文件中的确切组件文件和样式块非常容易： MUI v4 查找特定元素/样式类的方法 然而，在 MUI v5 中，这是......