Solved

Input styles

Posted on 2006-10-24
13
519 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

628 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