CODEWITHSUNDEEP
jqueryhtmlcss
Janey
Janey

Reputation: 1310

CSS to hide <input type="file"> not hiding the border

Im creating an app using jquery mobile and I have a feature that allows the user to click on an image which opens up

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

This is working well, however, I need the input box to be hidden. I have written the following code:

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

but all this does is hide the text within the box, it doesn't actually hide the outline. Any ideas on how I can get rid of this? js fiddle here http://jsfiddle.net/DLC4Y/

Upvotes: 1

Views: 3029

Answers (5)

Rishabh Shah
Rishabh Shah

Reputation: 679

Here's your solution:

Remove your previous styles related to hideme class (i.e .hideme) and add the following class.

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

Have a nice day.

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

Demo

Use this,

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

jQuery mobile, appends a <div> element to your <input> field. The border comes from that div element and not your input. So you need to remove this <div>

OR

Add this to CSS.

CSS Demo

.ui-input-text{
    display:none; 

}

Upvotes: 3

Yulfy
Yulfy

Reputation: 395

Make sure you're not overriding the CSS in another part of the file, also you should probably be using

border: none;

You could also possibly use the !important on it to override any CSS that changes the property later on.

border: none !important;

Upvotes: 0

Daniel W.
Daniel W.

Reputation: 32310

display: none; should be sufficient - it hides the element completely, including borders.

This is what I use, I have no visual or technical issues:

<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">

Upvotes: 1

Arijit Mukherjee
Arijit Mukherjee

Reputation: 3875

border: 0px;

this is what you are mentioning

where as it should be

border: none;

Upvotes: 0

Related Questions