How to reset input element style


Tags: html,css

Problem :

I have a form where i have a:

<input type="file" size="6" />

Unfortunately the button will be shown in the input bar! This because I had set up a css for all inputs in the form:

#msform input, #msform textarea {

    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-bottom: 10px;
    width: 80%;
    height: 29px;


    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;

    font-size: 12px;
}

please have a look: http://jsfiddle.net/kg48vpfq/ How can i clear the css for this input element only or maybe better how can i get the input box next to the button.

Thanks



Solution :

Add height: auto to the file input. Add this after the common styles for input and textarea.

#fieldset2 input[type="file"] {
    height: auto;
    border: 0;
}

Demo

#msform fieldset:not(:first-of-type) {
  display: none;
}
#msform label {
  width: 20%;
  float: left;
  margin-top: 10px;
}
/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-bottom: 10px;
  width: 80%;
  height: 29px;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 12px;
}
#msform textarea {
  min-height: 100px;
  margin-left: 50px;
}
#fieldset2 input[type="file"] {
  height: auto;
  border: 0;
}
<form id="msform">
  <fieldset id="fieldset2">
    <input type="file" size="6" />
  </fieldset>
</form>


    CSS Howto..

    How to turn off visjs active shadow box?

    How to display a box of color beside a table row using CSS?

    how to make css animation smoothly for full-screen page?

    How to enforce a min-width for a page (css)

    How do I slow down the banner transitions on my homepage? CSS

    How to create CSS dropdown

    How to adjust height of the div base on contents? [duplicate]

    How to set the CSS of an img inside a li inside a ul inside a class?

    How to use active and before with CSS?

    How to use px and % in the same layout like this

    How to use a divider in a navigation with list elements?

    How do I display a DIV if the current version of the program is greater than the version I have?

    How do I use “:nth-of-type” to select an element after the element is updated by jQuery?

    Having an HTML table, how can I toggle between displaying only specific rows using HTML, CSS, and JavaScript [duplicate]

    How to add CSS reference link to local HTML files in folder?

    how would I have the image in this div with rollover not get the overlay?

    How to achieve no outside margins for floats in a div

    How to swap two button elements using float in CSS

    How to have complex shadow background on variable height content area via CSS?

    Hover over image making it transparent and showing text

    How to isolate PrimeFaces Widget from being affected by main site CSS

    how to stop this irritating css behaviour

    I have a blinking box, how can I add a gradient to this or program it easier?

    How do a Add scroll bar with fixed header

    How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

    How i can make a dynamic css class without use of id?

    How to adjust a div to not move when other sibling is faded out

    How do I fix this alignment issue in jQuery & CSS?

    Using CSS, how can I control the line-height for master headline?

    How to align icons in a form using flexbox / css in a responsive way