Solved

Input styles

Posted on 2006-10-24
13
497 Views
Last Modified: 2008-02-01
I know how to change styles to a <input>, but I`m having a hard time applying style to a input that got type="file".

Please help.
0
Comment
Question by:brightwood
  • 7
  • 5
13 Comments
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796773
<input type="file"></input>

Works for me.
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796792
Try this:

<input type="file" style="color:red"></input>
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796812
Or:
<input type="file" style="color:red;font-weight:bold;font-size:12pt"></input>
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:brightwood
ID: 17796907
It works it seems.

But how I can do i from a css file ?

normal input { } ain't working.

Also how i can change the style to the "choose..." button ?
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796933
<style>
.hello {
      color:red;
      font-weight:bold;
      font-size:12pt
}
</style>
<input class="hello" type="file"></input>



0
 

Author Comment

by:brightwood
ID: 17797015
Strange, I tryed exactly the same few days ago but not worked. Works now.

But how i can change the style to the "choose..." button ?
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17797134
Works in IE.

<html>
<head>
  <title>File Upload Example</title>
  <script language="JavaScript" type="text/javascript">
  function HandleFileButtonClick()
  {
    document.frmUpload.myFile.click();
    document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
  }
  </script>
</head>
<body>
  <form name="frmUpload">
    <!-- Real Input field, but hidden-->
    <input type="file" id="myFile" style="display:none;">

    <!-- Fake field to fool the user -->
    <input type="text" id="txtFakeText" readonly="true">

    <!-- Button to invoke the click of the File Input -->
    <input type="button" onclick="HandleFileButtonClick();"
         value="Choose...">
  </form>
</body>
</html>
0
 

Author Comment

by:brightwood
ID: 17797413
Mm how about opera / firefox ?
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17797560
Doesn't work in Firefox. Click() method isn't recognizable by it. Same in Opera, I believe. I haven't been able to find how to fix that. dispatchEvent() is one of the options. But I still can't figure out how to use it properly.  Why do you want to change Browse to Choose in the first place?
0
 

Author Comment

by:brightwood
ID: 17797665
Sorry for missunderstanding. By default the button is named "Browse" in firefox, but in opera/IE 7 its named "Choose".

I don't want to change the text displayed on button, I want to change its style (size, text color, background color etc).
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17799860
0
 
LVL 7

Accepted Solution

by:
RealSnaD earned 500 total points
ID: 17806145
This one works in IE and FF, just change path to the picture to whatever it happens to be on your PC:

<style type="text/css">
<!--
form.example input {
      background: url('pix/input_boxes.gif') no-repeat 0 -58px;
      border: none;
      width: 241px;
      height: 20px;
      padding-left: 3px;
      padding-top: 3px;
}

form.example input:focus {
      background-color: transparent;
}

form.example div.fileinputs {
      position: relative;
      height: 30px;
      width: 300px;
}

form.example input.file {
      width: 300px;
      margin: 0;
}

form.example input.file.hidden {
      position: relative;
      text-align: right;
      -moz-opacity:0 ;
      filter:alpha(opacity: 0);
      opacity: 0;
      z-index: 2;
}

form.example div.fakefile {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 350px;
      padding: 0;
      margin: 0;
      z-index: 1;
      line-height: 90%;
}

form.example div.fakefile input {
      margin-bottom: 5px;
      margin-left: 0;
}
-->
</style>
<form action="#" class="example">
<div class="fileinputs">
      <input type="file" class="file hidden" noscript="true" />

      <div class="fakefile">
            <input />
            <img src="pix/button_select.gif" alt="Browse" />
      </div>
</div>
</form>

Taken from here: http://www.quirksmode.org/dom/inputfile.html
If that example doesn't work for you, read through that article. You'll find everything you asked for.
0
 

Author Comment

by:brightwood
ID: 17815789
Thank you :)
0

Featured Post

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
is this a cms? 8 60
Changing way home page shows 2 32
Location of Buttons 4 15
Background video not displaying in Internet Explorer. 3 22
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question