?
Solved

Input styles

Posted on 2006-10-24
13
Medium Priority
?
524 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:Yury Merezhkov
ID: 17796773
<input type="file"></input>

Works for me.
0
 
LVL 7

Expert Comment

by:Yury Merezhkov
ID: 17796792
Try this:

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

Expert Comment

by:Yury Merezhkov
ID: 17796812
Or:
<input type="file" style="color:red;font-weight:bold;font-size:12pt"></input>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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:Yury Merezhkov
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:Yury Merezhkov
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:Yury Merezhkov
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:
Yury Merezhkov earned 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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 demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

719 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