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

    How to make css opacity property not to be inherited from parent div´s?

    How to make an image always load in the center of page?

    How to calculate gradient color replacements?

    How to reduce div size in CSS using twitter bootstrap?

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

    Font-family not showing correctly on my website

    How can I customize the CSS generated by LESS to include Font Awesome?

    How to change CSS attribute at all div inside td with class

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    How to center the buttons and make them same size

    how to set responsive background-image of element using css?

    CSS how to center ::after pseudo elem

    How to make gradual colour change when hover with CSS?

    How to override inline css from external class?

    How to add your customise arrows in slick slider JS using CSS

    How to divide HTML into two distinct areas, as if using frames?

    How to find out an element with id partially matched, and change its css style?

    CSS and HTML: How to create an Expanding DIV On Click?

    How to create a full screen div on landing page

    A plugin or tool to show what elements on a page are effecting other elements?

    How to correct css for IE?

    How to automatically resize a div based on background image size?

    Hide/Show table in my Email with the use of a button

    How do I make these buttons stay activated after clicking on them?

    How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?

    how to add css on click and remove it when they click close button [closed]

    How do I change the Mailchimp subscribe button color using inline CSS?

    How to change divs placing from horizontal to vertical using css?

    how to animate .jpg image with CSS?

    How do I expand this CSS list?