styles 相关问题

我看到了很多关于此的问题，但没有一个能解决我的问题。我拥有的： 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>

css angular bootstrap-4 angular-material styles

回答 4 投票 0

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

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

header formatting styles documentation

回答 2 投票 0

Django 中的按钮样式

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

html css django django-templates styles

回答 1 投票 0

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

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

html css coding-style styles footer

回答 5 投票 0

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

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

css reactjs next.js styles

回答 1 投票 0

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

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

python styles

回答 2 投票 0

如何在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>

image button next.js styles tailwind-css

回答 1 投票 0

删除所有以前的CSS样式

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

html css styles global

回答 1 投票 0

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

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

python pandas styles jupyter

回答 1 投票 0

React Native：径向渐变背景

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