Good day. I use CSS Framework Bootsrap , the prototype of the site can be found here . (you need to scroll the page to the bottom) Faced with the problem:
<li> <label>Вставить фоновое изображение:</label> <input type="file" class="btn btn-primary"> </li> How do I apply class="btn btn-primary" only to the "Select File" button, and not to the entire form field?
Actually, neither. Try better something like this jQuery plugin for styling file inputs
No The button is an integral part of the <input type = "file" /> field and is not an independent element. However, you can make a pseudo-button, click on which will trigger on the type = file field. Here you can hang a class on it and somehow stylize it, for example.
PS Here I sketched you primerchik .
Standard means to do this will not work. I met two approaches for styling the input type file. I will tell the mat part to make it easier to realize if you take it.
First: turn the entire structure (field and button) into a simple button. This is a lot of uncomfortable, extremely hemorrhoid layout. Next, add the usual input type text next. By clicking on a new button and selecting a file, get the file name and insert it into the input type text.
Visually, this is similar to what you want to achieve. It works, of course, not as untouched input tipe file. It is impossible, for example, handles to correct the path to the file. More or less experienced users will be confused because the path to the downloaded file is not visible in the form, etc.
Second: Just turn the design into a button. At the choice of the file, next to the button to display the names of the downloaded files and the cross to cancel the file download.
It looks not standard, for that does not confuse.
In both ways there are a lot of ready-made solutions, jQuery-plugins and articles, how to do it yourself.
I advise you to think again whether you need to style this input type file.
Source: https://ru.stackoverflow.com/questions/135914/
All Articles