如何设置 样式隐藏文本框并仅显示按钮
样式可能具有挑战性,尤其是在尝试隐藏文本框并仅显示按钮时。
CSS 解决方案
要使用 CSS 实现所需的效果,请考虑以下代码:
<code class="html"><html> <style type="text/css"> div.fileinputs { position: relative; } div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } div.fakefile input[type=button] { /* enough width to completely overlap the real hidden file control */ cursor: pointer; width: 148px; } div.fileinputs input.file { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } </style> <div class="fileinputs"> <input type="file" class="file" /> <div class="fakefile"> <input type="button" value="Select file" /> </div> </div> </html></code>
此 CSS 代码创建一个与真实文件输入重叠的 fakefile 按钮,并使用不透明度:0 隐藏文本框;。
以上是如何在 HTML 中自定义文件输入按钮并隐藏文本框?的详细内容。更多信息请关注PHP中文网其他相关文章!