Question

我正在使用jquery mobile创建一个应用程序，我有一个功能，允许用户点击打开的图像

<input type="file" name="file" id="file" onchange="submitForm(this)" capture="camera" class="hideme" accept="image/*" />

这很好用，但我需要隐藏输入框。我写了以下代码：

.hideme
 { 
 display:none; 
 visibility:hidden; 
 border: 0px;
 }

但所有这一切都隐藏了框内的文字，它实际上并没有隐藏轮廓。关于如何摆脱这种想法的任何想法？ js在这里摆弄http://jsfiddle.net/DLC4Y/

Answer 1

Demo

使用此，

$('#file').parent().hide();

jQuery mobile，将<div>元素附加到<input>字段。边框来自div元素而不是您的输入。因此，您需要删除此<div>

OR

将此添加到CSS。

<强> CSS Demo

.ui-input-text{
    display:none; 

}

Answer 2

display: none;应该足够了 - 它完全隐藏了元素，包括边框。

这是我使用的，我没有视觉或技术问题：

<style>
.hide-me { display: none; }
.i-am-a-link { cursor: pointer; }
</style>

<label for="image-upload" class="i-am-a-link">
    <img src="placeholder.jpg"
         id="image-upload-label">
</label>

<input type="file" id="image-upload" class="hide-me">

Answer 3

border: 0px;

这就是你提到的

应该在哪里

border: none;

Answer 4

确保您没有覆盖文件另一部分的CSS，也可能应该使用

border: none;

您还可以使用!important来覆盖稍后更改该属性的任何CSS。

border: none !important;

Answer 5

这是你的解决方案：

删除与hideme类相关的先前样式（即.hideme）并添加以下类。

.ui-body-c, .ui-overlay-c{
    border: none;
    box-shadow: none;
}

度过愉快的一天。

CSS隐藏<input type =“file”/>不隐藏边框

5 个答案:

Demo