styles 相关问题

-webkit-fill-available 的用法是什么？

PIC-1 这就是我所拥有的（图1） PIC-2 这就是我需要的（图2） 在pic-2中我添加了 宽度：-webkit-fill-available； 我得到了我所期望的。但我不知道它是如何工作的。

Angular 11 - 如何使用 Angular Material 设置文件输入按钮的样式

我看到了很多关于此的问题，但没有一个能解决我的问题。 我拥有的： Angular 11、Angular Material 8 和文件输入如下： < 我看到了很多关于此的问题，但没有一个能解决我的问题。 我有： Angular 11、Angular Material 8 和如下文件输入： <div class="form-group"> <input #myInput type="file" formControlName="fi" id="fi" name="fi" (change)="postMethod($event.target.files)"> </div> 我需要什么： 我需要自定义这个按钮的颜色、文本和大小。 如何定制？谢谢。 最终用这种方式解决了（适用于 Angular Material 和 Bootstrap）： 我设置了3个独立的组件: 将可见的按钮（可以是 Angular Material 按钮或 Bootstrap 按钮，如下所示） 文件输入 将包含文件名的标签 HTML <div> <button #file class="btn btn-light">Examinate</button> <div style="display: inline-block"> <input #myInput formControlName="file" id="file" name="file" (change)="postMethod($event.target.files)" type="file"/> <p>{{file}}</p> </div> </div> CSS 使用 CSS，我强制输入为 overlay 按钮，并设置 opacity=0 以便按钮可见。 - 按钮： float:left; position:absolute; z-index:-1; - 输入： opacity: 0; //Not visible font-size: 0; //Button dimensions width: 90px; height: 37px; float: left; - 输入（悬停）： cursor: pointer; - 标签： float: left; margin-left: 6px; margin-top: 7px; 这是最终结果： 您根本无法设置输入类型文件的样式，最好的方法是创建与输入类型文件对应的覆盖元素。 使用材质，您几乎可以设计与材质有关的所有内容，当然，您可以将材质中的类添加到自定义组件，但这不是材质的用途。 简单的例子，你不想这样做： <div class="mat-card"></div> 如果你能做到这一点： <mat-card></mat-card> 输入也是如此，如果你希望它是材质风格，你应该创建这样的东西： HTML： <mat-card class="input-container"> <button #file mat-flat-button color="primary">Examinar... <input multiple (change)="onFileSelected($event)" style="opacity: 0; position:absolute; left:0px; top:0px; width:100%; height:100%;" type="file"/> </button> {{files|json}} </mat-card> TS： files: string[] = []; onFileSelected(event) { if (event.target.files.length > 0) { for (let i = 0; i < event.target.files.length; i++) { this.files.push(event.target.files[i].name); console.log(event.target.files[0].name); } } } CSS： .input-container { position:relative; } 这是一个简单的例子。 但我仍然更喜欢使用某种 npm 包，例如：https://www.npmjs.com/package/ngx-dropzone 您可以使用 css 更改样式。 input[type=file]::file-selector-button { cursor: pointer; border: 0; padding: 8px; background-color: rgb(91, 105, 194); border-radius: 8px; color: white; } input[type=file]::file-selector-button:hover { background-color: rgb(54, 61, 115); } <div> <input type="file" [accept]="'.csv'" multiple id="file-upload-multiple"/> <label class="custom-file-label">Select file</label> </div> 在你的css/scss/sass： #fi { background-color: pink; ... } 使用 Angular Material 设计单个按钮的样式并不是一个好方法。如果您想设置组的样式，那么我建议阅读以下内容：https://material.angular.io/guide/customizing-component-styles 编辑： file类型的输入元素对于样式来说并不简单。 这是一个简单的例子，它是如何工作的： .fileContainer { overflow: hidden; position: relative; cursor: pointer; background-color: pink; } .fileContainer [type=file] { cursor: inherit; display: block; font-size: 999px; filter: alpha(opacity=0); min-height: 100%; min-width: 100%; opacity: 0; position: absolute; right: 0; text-align: right; top: 0; } <label class="fileContainer"> File upload <input type="file"/> </label>

Google 文档中带有水平线的标题？

有没有办法在谷歌文档中实现这种样式？ 到处寻找并尝试了我能想到的一切。短暂性脑缺血发作。

Django 中的按钮样式

按钮应该是一个小的垂直矩形，顶部宽度应该突出一点。压前应为白色，压后为深红色。 当指针移到这个位置时...

如何将<footer>元素粘贴在页面底部（HTML5和CSS3）？

当我使用没有内容的相对位置时，页脚会上升，使用绝对位置且有大量内容时，页脚会下降，而使用固定位置时，页脚始终存在。 有没有一种简单的方法可以结束...

这是在 React App 中使用 CSS 的正确方法吗？

我是韩国人，所以我是通过翻译来写这篇文章的。句子如有不妥之处请谅解。 我正在使用 Nextjs 制作一个网络应用程序。我在做 CSS 的时候有很多顾虑。我会...

Python默认（可变）参数初始化风格

让我们有一个 make_sandwich 函数，它接受默认值为 ['ham', 'ham', 'bacon', 'ham'] 的成分列表 def make_sandwich(配料=['火腿', '火腿', '培根', '火腿']): ...

如何在nextjs中使用tailwind在图像上放置按钮？

正如标题所说，我无法成功在顺风和下一个 14 的图像上显示按钮，实际上这是我的以下代码： 正如标题所说，我无法成功在顺风和下一个 14 的图像上显示按钮，实际上这是我的以下代码： <div> <Image src={projectAiWriter} alt="ai" className="lg:w-[430px] relative" /> <div> <button className="lg:w-[430px] text-black absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center"> Button </button> </div> </div> 我在谷歌搜索中查找的信息向我展示了一些像我一样的代码片段，但按钮仍然没有在图像上对齐，但它已经结束了，等待一些提示。 将父级 relative 和按钮 absolute 设为如下： <div className="relative lg:w-[430px]"> <Image src={projectAiWriter} alt="ai" className="lg:w-[430px]" /> <div> <button className="lg:w-[430px] text-black absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center"> Button </button> </div> </div>

删除所有以前的CSS样式

我有一个创建弹出窗口的 javscript 包。我还为该弹出窗口提供了一些 css 样式。用户可以使用 npm 或 CDN 导入脚本（和 css）。 问题是有时...

如何在 Jupyter 笔记本中的 pandas 数据框样式器的工具提示中添加换行符

在 Jupyter Notebook 中查看数据帧时，我想将工具提示中的“第一行第二行”文本拆分为两行。 将 pandas 导入为 pd df = pd.DataFrame({'a':[*'abcdef'], 'b':[*'

React Native：径向渐变背景

是否有一个包或另一种方法可以为其中一个视图提供简单的（比如说蓝色到蓝色的径向渐变背景）？ 我尝试过react-native-radial-gradient，但似乎是

CSS：将背景渐变添加到 div 底部时，背景渐变不跟随滚动条

我正在尝试在 a 的底部添加白色淡入淡出效果，乍一看似乎效果很好。但是当我向下滚动时，我可以看到这种淡入淡出不再位于底部。有谁知道为什么这会...

如何通过样式查找元素？

HTML： HTML： <div class="example-event Gantt-event event_class_color Gannt-event-another-edit" data-object-type-id="4" data-is-people="true" data-is-taken="false" data-is-externalorder="false" data-is-inaccessibility="false" data-work-status="1" title="SEPP-16288" style="width: 400px; height: 18px; left: 400px; top: 5px; line-height: 18px; background: repeating-linear-gradient(45deg, rgb(255, 243, 204), rgb(255, 243, 204) 10px, rgb(249, 30, 26) 10px, rgb(249, 30, 26) 20px);"> </div> 我有一些相同的元素，但风格不同。 Cypress 有什么方法可以按样式选择元素，但版本比以下更短： cy.get('[style="width: 400px; height: 18px; left: 400px; top: 5px; line-height: 18px; background: repeating-linear-gradient( 45deg, rgb(255, 243, 204), rgb(255, 243, 204) 10px, rgb(249, 30, 26) 10px, rgb(249, 30, 26) 20px );"]' ) 例如仅使用背景颜色或高度？ 您可以像这样 * 一样使用 cy.get('[style= 和 cy.get('[style*= 来执行包含搜索。 cy.get('[style*="background: repeating-linear-gradient(45deg, rgb(255, 243, 204)"]') 话虽如此，在执行这样的选择器之前，我会尝试其他方法来定位您的元素。您是否尝试过定位父元素并执行 within( ($el) => {})。通过这种方式，您可以将可以找到的元素限制为有限数量的元素，通常允许您使用更详细的选择器。 我认为使用 title，因为这是用户将事件悬停在甘特图上时看到的内容。 cy.get('[title="SEPP-16288"]') 如果你只想使用背景颜色，你可以使用这个： cy.get('[style*="background: repeating-linear-gradient(45deg, rgb(255, 243, 204)"]') 如果你想使用高度，你可以这样做： cy.get('[style*="height: 18px"]') 或者，更好的方法是使用 data-is- 属性。假设属性 data-object-type-id 对于每个元素都是唯一的，您可以使用它。如果这不是唯一的，您可以搜索具有唯一且恒定值的属性。 cy.get('[data-object-type-id="4"]')

在CSS中使用数据主题变量值

我想在数据主题属性中存储颜色的十六进制值，例如 document.body.setAttribute("数据主题", "#a20000") 我如何在 CSS 文件中使用这个值，如下所示 ...

修复注册页面

我目前正在将几个旧项目重新用于一个新项目，但我不记得过去是如何成功实施它们的。 问题出在第三段，那...

React JS 将中间的文本加粗

在下面的代码中，我只想为图表描述设置一些单词的样式（例如“投资回收期”）。粗体或斜体等。尝试了正则表达式，但不起作用。请帮忙！ 导入R...

如何设置TextView文本样式如粗体、斜体

如何在Java中设置TextView样式（粗体或斜体）而不使用XML布局？ 换句话说，我需要用Java编写android:textStyle。

当我向元素添加滤镜模糊属性时，这种类型的水平线就会出现

过滤器：模糊（100px）； 我将以下样式添加到特定元素。但有些线路正在出现，看起来不太好。 我怎样才能删除那条线并制作完美的发光模糊元素。我可以删除...

CSS 内部样式表与外部样式表

我正在创建一个网页，并开始使用顶部的样式标签： 我正在创建一个网页，并开始使用顶部的样式标签： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Front Page</title> <link rel="stylesheet" type="text/css" href="CSS/Styles.css" /> <style type="text/css"> </style> </head> <body> </body> </html> 我希望所有图形设计都在 Styles.css 中，但由于某种原因，它不起作用。当我添加类似的内容时： div.box { margin:0 auto; width:500px; background:#222; position:relative; left: 50px; top: -200px; height: 100%; border:1px solid #262626; padding: 0 5px 5px 0; } 设计此元素： <div class="box"></div> 当我将它放在文档上方的标签中时它可以工作，但如果我将它放在CSS文件中则不行。以前这不是问题，但现在我已经将所有内容添加到样式标签中，并且它变得非常长（150 行！）。我想将其全部移动到 css 文件中，这样我的主页就不需要滚动了。但我不明白为什么图形更改如果放入 CSS 文件中就不会应用。有什么想法吗？ 如果您的 CSS 文件路径没问题，则可能发生了以下几种情况： 您可能只需要清除缓存即可。 CTRL+F5通常可以解决问题。访问您网站的新用户不需要这样做。 您可能有一个拼写错误，或者忘记用 ; 结束上面的语句，请检查一下。 这可能是一个特殊性问题，即另一个规则，更具体的是覆盖您的规则。 在这里阅读相关内容。 您使用的是区分大小写的文件系统 (Linux) 吗？您通往 CSS/Styles.css 的道路必须完全正确。而且，它是相对于页面和<basepath/>。尝试使用绝对 URL 来排除路径问题。 如果您没有路径问题，那么您可能不小心在CSS文件中的某个地方犯了拼写错误，导致您的规则被遗漏。 如果您的 CSS 文件良好，那么您的浏览器可能缓存了旧版本。您是否尝试过清除缓存？ CSS 文件的链接方式或文件路径似乎可能存在问题。您可以检查以下几项内容并尝试解决问题： 文件路径： 确保 CSS 文件的路径正确。在您的 HTML 中，您有： .确保 CSS 文件位于相对于 HTML 文件的“CSS”目录中。 检查文件名和文件夹名称中是否有拼写错误。文件路径区分大小写，因此请确保大小写匹配。 文件内容： 打开“Styles.css”文件并检查样式是否正确编写。确保没有语法错误或拼写错误。 确保选择器 .box 在 CSS 文件中正确写入。 清除浏览器缓存： 有时，浏览器可能会缓存 CSS 文件的先前版本。尝试清除浏览器缓存并刷新页面以查看更改是否生效。 网络请求： 使用浏览器的开发者工具（通常通过右键单击页面并选择“检查”或“检查元素”来访问）检查CSS文件是否加载成功。在控制台中查找任何错误。 以下是文件和目录结构的示例： 降价 复制代码 您的项目文件夹 index.html CSS 样式.css 确保“Styles.css”位于“CSS”目录中，并且 HTML 文件位于项目的根文件夹中。

WPF Setter 不适用于某些控件

我正在尝试在我的应用程序中使用设置器来更改所有控件的字体大小。我的风格是这样的： <Setter Pr...</desc> <question vote="0"> <p>我正在尝试在我的应用程序中使用设置器来更改所有控件的字体大小。我的风格是这样的：</p> <pre><code>&lt;Style x:Key=&#34;baseStyle&#34; TargetType=&#34;{x:Type Control}&#34;&gt; &lt;Setter Property=&#34;FontSize&#34; Value=&#34;12&#34; /&gt; &lt;Setter Property=&#34;Background&#34; Value=&#34;{x:Null}&#34; /&gt; &lt;Style.Triggers&gt; &lt;DataTrigger Binding=&#34;{Binding Width, ConverterParameter=1000, Converter={StaticResource DoubleToBoolConverter}, ElementName=window, Mode=OneWay}&#34; Value=&#34;True&#34;&gt; &lt;Setter Property=&#34;FontSize&#34; Value=&#34;24&#34; /&gt; &lt;Setter Property=&#34;Background&#34; Value=&#34;Red&#34; /&gt; &lt;/DataTrigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; </code></pre> <p>我所有的子样式都是这样的</p> <pre><code>&lt;Style BasedOn=&#34;{StaticResource baseStyle}&#34; TargetType=&#34;{x:Type Button}&#34;&gt; ... &lt;/Style&gt; </code></pre> <p>我的问题是我的样式并未应用于所有控件。例如接缝标签可以忽略我的 FontSize Setter</p> <p>默认样式： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzhLcVhzLnBuZw==" alt="Default Style"/></p> <p>触发风格： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL241Qzk0LnBuZw==" alt="Triggered Style"/></p> </question> <answer tick="false" vote="0"> <p>您实际上指的是 <pre><code>Label</code></pre> 元素还是 <pre><code>TextBlock</code></pre> 元素？因为后一种类型不是<pre><code>Control</code></pre>，不会受到你的<pre><code>Style</code></pre>的影响。这应该可行：</p> <pre><code>&lt;Style BasedOn=&#34;{StaticResource baseStyle}&#34; TargetType=&#34;{x:Type Label}&#34; /&gt; </code></pre> </answer> </body></html>