How change text and color of button Browse of input file?
Appearance and functionality is ok, but this is not your real expected one. think this is help to you.
<input type="text" id="fileName" readonly="readonly" >
<div class="file_input_div" style="display: inline;">
<input type="button" id="button" value="Open"/>
<input type="file" style="opacity:0; position:relative; left:-40px;" onchange="javascript: document.getElementById ('fileName') . value = this.value"/>
</div>
CSS
#button{
position: relative;
left:-1px;
background-color:#446655;
}
DEMO
How to change the color of the Choose File button (wordpress)?
You can make use of ::file-selector-button
since the upload button is part of the pseudo-element.
.hide-if-value input[type=file]::file-selector-button {
color: red;
}
<div class="hide-if-value">
<label class="acf-basic-uploader">
<input type="file" name="acf[field_60bc599999c5]" id="acf-field_60bc599999c5">
</label>
</div>
How to change the color of the file input button in a form after a file is selected with css?
There are a couple of ways to do this. If you have the complete js code then it would be much easier to answer.
Basically you could use a ternary to determine if the file is uploaded (stored in state), then change the css based on such.
For instance:
const [isUploaded, setIsUploaded] = useState(null)
//Change the upload to true once a file is selected
<label for="file-input" class={isUploaded ? "file-button-after-upload" : "file-button-before-upload">Select File</label>
Styling an input type=file button
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input>
tag directly, this is easily possible with the help of a <label>
tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
Change default text in input type=file?
Each browser has it's own rendition of the control and as such you can't change either the text or the orientation of the control.
There are some "kind of" hacks you may want to try if you want an html/css solution rather than a Flash or silverlightsolution.
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Personally, because most users stick to their browser of choice, and therefore are probably used to seeing the control in the default rendition, they'd probably get confused if they saw something different (depending on the types of users you're dealing with).
How to style file input?
In order to achieve that, you can wrap the input button with "label", so that label becomes clickable. Then make your input button opacity 0 (transparent).
$('.file-submit').on('change', function(){ $(this).closest('.btn-wrapper').find('span') .text('FOTOS Formatos aceptados: JPG');})
.btn-wrapper { font-family: 'Veranda', sans-serif;}
.btn-file { padding: 8px 15px; background-color: #fd8907; border-radius: 3px; color: #fff; margin-right: 8px;}
.btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block;}
.btn-file span { display: block; color: #777;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><td> <div class="btn-wrapper"> <label class="btn-file"> Elegir archivos <input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple"> </label> <span>No se eligio archivo</span> </div></td>
Related Topics
Failed to Load Resource: the Server Responded With a Status of 404 (Not Found) CSS
Space Between Navbar and the Content
Google Chrome Does Not Autoplay Html5 Video on Mobile
Nested Ngfor Looping Over an Array of Objects
Html - How to Get My Text Next to My Icon
How to Change Pressed Item Background Color in Ion-List on Ionic
Children Not Staying Inside Parent Divs
What Are Valid Values For the Id Attribute in Html
Css Pseudo-Classes With Inline Styles
Stretch and Scale CSS Background
In Angular 4, How to Dynamically Set Min Date and Max Date in Date Picker
How to Hide an HTML Table Row <Tr> So That It Takes Up No Space
How to Make All Images of Different Height and Width the Same Via CSS
How to Disable an Input Dynamically With Angular 7
How to Remove Button Style or Overwrite Dynamically Added Classes to Button in Material2
Change Default Text in Input Type="File"
Bootstrap Row With Columns of Different Height
How to Vertically Center a Div Element For All Browsers Using Css