how to Styling a “choose file” button using css Only


Tags: html,css,css3

Problem :

Friends.

I want to try design this :

<input type="file" multiple>

want i want: i want change its color, also change its size...

thanks in advance.



Solution :

File type is a native element henceforth you cant change it's appearance. Instead you can hide at the back of some element.

<div>
  Choose File
 <input type="file" class="hide_file">
</div>

 div{
  padding:5px 10px;
  background:#00ad2d;
  border:1px solid #00ad2d;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
}

Refer Here


    CSS Howto..

    CSS/Javascript: How to make rotating circular menu with multiple states?

    How to print on a specific paper

    How change css using variables to make an animation

    How to add specific CSS attributes to all text-containing elements

    How can I add background color to CSS triangles?

    How to use CSS to shift my menu div to the right?

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How to display a horizontal line before and after a heading in css

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    How to create smaller CSS files for easier handling while developing [closed]

    How to use toggle css classes on an element onclick?

    How to think to get all content inline (HTML & CSS)

    how to animate .jpg image with CSS?

    How can I interact with DOM elements under an HTML element that has a background?

    How to keep CSS style If I change the html content dynamically?

    how to fix customize select box using css?

    How to set date search toolbar field width on autoresize

    How to create a dropdown with lu and li tags like this

    In CSS/JS, how to word-wrap at every nth word?

    How To Add Links To Right Of Header?

    How do I hide all children except the for the first child in Javascript/JQuery and CSS?

    How to reposition a div

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    Prevent div from showing after slideUp() - jQuery

    How to mix colors in CSS?

    how to make css submenu stay put when subpage has been selected

    Android Layout, how to make a radius and border like css

    how to use static folder in django for css and javascript?

    How to target last row in a list with CSS?

    How to apply background-color: css only in a webkit browser