I've been working on some forms, and I'm not sure how to customize them.
This solution seems to work, but in my case the properties are simply applied to the area around the form rather than the form itself.
CSS:
.Forms{
position:relative;
top:100px;
background-color:#666;
font-family:'Unica One';
font-weight:500;
}
HTML:
<form action="" method="post" class="Forms" id="Form1">
<input type="submit" value="Email Zoltan (Financial Manager, Director)" />
<input type="hidden" name="button_pressed" value="1" />
</form>
The CSS code sets properties on the form element. Apparently you want to apply some of them to the input button instead, so you need to break the rule into two rules:
<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Unica+One'
rel='stylesheet'>
<style>
.Forms {
position: relative;
top: 100px;
}
.Forms input[type=submit] {
background-color: #666;
font-family: 'Unica One';
}
</style>
<form action="" method="post" class="Forms" id="Form1">
<input type="submit" value="Email Zoltan (Financial Manager, Director)" />
<input type="hidden" name="button_pressed" value="1" />
</form>
I presume Unica One is meant to refer to a Google font with that name. In that case, do not set font-weight, since that font exists as normal (400) typeface only. If you try to set the weight to 500, most browsers ignore it but some may apply algorithmic bolding, which produces questionable results.
Note that setting the background color changes the basic rendering too: the default button, usually with rounded corners in modern browsers, turns to a rectangular box with a bit odd border. You can change this by setting various border properties (including border-radius) on the input element. The point is that buttons have built-in rendering in browsers, but if you set certain crucial CSS properties, this rendering changes to something different, and you should consider setting different other properties as well, when relevant.
P.S. The button becomes almost illegible, due to insufficient color contrast mostly, and Unica One isn’t really suitable for use like this.
try this give css to the form input submit button as said by scott
form.Forms input[type="submit"]{
position:relative;
top:100px;
background-color:#666;
font-family:'Unica One';
font-weight:500;
}
Related
I've got a file submit form and I want to change how the buttons look. Previously, I've done it this way, by wrapping the form inputs into divs and then using CSS to make the divs look a certain way.
However, It doesn't seem to work for the file submit button #myFile. It just places the button inside of the div. Whereas the submit button looks how I want it to look. Anyway to fix this? I would like the Choose File button to look like the submit button. Just text, no gray oval.
<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
<div id="btn_upload_data">
<input type="file" name="myfile" id="myFile"/>
</div>
<div id="btn_sub_data">
<input type="submit" id="data_submit" value="Submit File"/>
</div>
</form>
Some CSS:
div#btn_upload_data input {
cursor:pointer;
padding-top:40px;
padding-bottom:60px;
width:130px;
height:0px;
background-color:#a6e79b;
border: none;
text-align:center;
display:inline-block;
float:left;
white-space: pre-wrap;
}
Try using
#btn_upload_data input[type="file"] {
opacity: 0;
filter: aplha(opacity=0);
}
And then place a text inside the div as Choose File.
<div id="btn_upload_data" title="No File Chosen"> // if title needed
<input type="file" name="myfile" id="myFile"/>
Choose File...
</div>
There is no alternate way of editing it. It is a pre-defined input type file's style. That is set by the OS itself. So you cannot edit that! You need to override it completely.
I am trying to differentiate a button so that clients can see that it is the button that is in focus by default when the page loads. The design calls for a simple border around the button. I have button and button1 defined in my css like so:
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
}
.button1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
border: #00ffff;
border-style: solid;
border-width: 2px;
}
The button that I am trying to focus loses the default formatting. How might I fix this so that it simply keeps its formatting, the only difference being a thicker border around the button? Also, is there a way to make the border simply wrap itself around the shape of the button instead of being a rectangular border?
Here is an image of what my buttons look like:
In this case, I am trying to focus the Jail Address button.
The html for the input buttons is like so:
<input type="reset" class="button" name="refresh" value="Refresh">
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'">
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'">
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">
the border by default is going to be rectangle, though with some browsers (not all) you can use the "border-radius: 5px" to get rounded corners
http://www.css3.info/preview/rounded-border/
you could also just make images with the buttons you want and use them instead (png is preferred since it will keep transparency)
.button1 {
background-image:url('paper.gif');
background-repeat: no-repeat;
cursor: hand;
}
I use that often instead of just img src=, then you can add an "on mouseclick" with javascript.. just an option. also, the cursor can be changed so it actually looks like they're rolling over a button :)
It appears that setting a button border:x style can completely change the button rendering, at least in Safari and Firefox. Here's a little test file I just used to demonstrate the effect:
<html>
<head>
</head>
<body>
<form>
<input type="submit" value="no border"/>
<input type="submit" value="border:0" style="border:0;"/>
<input type="submit" value="border:2" style="border:2;"/>
<input type="submit" value="width:8rem" style="width:8rem;"/>
</form>
</body>
</html>
Rendered in Firefox on MacOS, it looks like this:
and in Safari:
So it appears that the behaviour depends on both the border value and the browser. Seems odd to me, but there you are. I think this explains the effect described in the original question.
The default stylings for UI elements like buttons are user-agent defined, AFAIK there isn't a border setting which will allow you to follow the contours of the button without using CSS3's border-radius. Perhaps you should use a different element for your buttons that do not have a pre-defined shape, or use border-radius if appropriate, or a background image for which has the shape that you want.
Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
Is it possible to style a input element of type file without worrying about browser compatibility? In my case I need to implement a background image and round border(1px), the button should also be customised if possible.
Follow these steps then you can create custom styles for your file upload form:
1.) This is the simple HTML form(please read the HTML comments I have written here bellow)
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
<!-- this is your file input tag, so i hide it!-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<input type="submit" value='submit' >
</form>
2.) Then use this simple script to pass the click event to file input tag.
function getFile(){
document.getElementById("upfile").click();
}
Now you can use any type of a styling without worrying how to change default styles.
I know this very well, because I have been trying to change the default styles for month and a half. believe me it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.
<html>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
Same solution via Jquery. Works if you have more than one file input in the page.
$j(".filebutton").click(function() {
var input = $j(this).next().find('input');
input.click();
});
$j(".fileinput").change(function(){
var file = $j(this).val();
var fileName = file.split("\\");
var pai =$j(this).parent().parent().prev();
pai.html(fileName[fileName.length-1]);
event.preventDefault();
});
After looking around on Google for a long time, trying out several solutions, both CSS, JavaScript and JQuery, i found that most of them were using an Image as the button. Some of them were hard to use, but i did manage to piece together something that ended out working out for me.
The important parts for me was:
The Browse button had to be a Button (not an image).
The button had to have a hover effect (to make it look nice).
The Width of both the Text and the button had to be easy to adjust.
The solution had to work in IE8, FF, Chrome and Safari.
This is the solution i came up with. And hope it can be of use to others as well.
Change the width of .file_input_textbox to change the width of the textbox.
Change the width of both .file_input_div, .file_input_button and .file_input_button_hover to change the width of the button. You might need to tweak a bit on the positions also. I never figured out why...
To test this solution, make a new html file and paste the content into it.
<html>
<head>
<style type="text/css">
.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button {width: 80px;position:absolute;top:0px;
border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
<input type="file" class="file_input_hidden"
onchange="javascript: document.getElementById('fileName').value = this.value"
onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
Here's a simple css only solution, that creates a consistent target area, and lets you style your faux elements however you like.
The basic idea is this:
Have two "fake" elements (a text input/link) as siblings to your real file input. Absolutely position them so they're exactly on top of your target area.
Wrap your file input with a div. Set overflow to hidden (so the file input doesn't spill out), and make it exactly the size that you want your target area to be.
Set opacity to 0 on the file input so it's hidden but still clickable. Give it a large font size so the you can click on all portions of the target area.
Here's the jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
Browse
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
Use the clip property along with opacity, z-index, absolute positioning, and some browser filters to place the file input over the desired button:
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
use uniform js plugin to style input of any type, select, textarea.
The URL is
http://uniformjs.com/
Regarding html forms, a very common markup pattern is:
<form ...>
<p>
<label>Name:</label>
<input .../>
</p>
<p>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
How much markup (classes, etc.) do you typically provide to allow for the most flexible visual formatting of the form? That is, how much markup do you add to help with your css selectors and do you use generic selectors?
<form ...>
<p class='name'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
vs.
<form class='person' ...>
<p class='name string'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate date'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
In the second case, adding generic types ("date") straight from the database can make it more easy to consistently format date fields. Wrapping a grouping ("person") to show the model from which the fields come, can help too. (Or I could have used an internal DIV.) Yet, to increase css reuse, I find myself adding extra markup. In some books I've read I hear that the less markup, the better (and that line can be very gray though it rings true to me). For example, I could very well have used the markup from one of the prior blocks and added a lot more selectors to the css.
What are your principles for deciding just how much markup makes sense? Or how much to put on the css side?
Also, I know that I can select against the name of the input, but since that's a nested element I lose my ability to control formatting from the outer wrapper ("p") which is usually where I want that extra control.
I tend to use definition list tags to style my forms.
<form>
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input name="name" /></dd>
<dt><label for="birthdate">Birthdate:</label></dt>
<dd><input name="birthdate" /></dd>
...
</dl>
</form>
I also use the following CSS:
FORM DT {
clear:both;
width:33%;
float:left;
text-align:right;
}
FORM DD {
float:left;
width:66%;
margin:0 0 0.5em 0.25em;
}
More information here: http://www.clagnut.com/blog/241/
It's a lot of markup, but the effect is consistent and effective.
Another arguably acceptable method of styling forms is to use tables. Just think of the form as "interactive tabular data."
I wouldn't use a <p> tag to group a label and its field, since it's not a paragraph. If you have no other use for <fieldset> you could use one per "row". If you have three inputs for birthday then a fieldset is totally appropriate.
A definition list as Gavin suggested isn't a bad idea but it does seem like unnecessary markup - you can just style the labels and inputs to the right widths and float them.
Adding wrapper classes is also perfectly valid - remember that you don't have to use them in CSS, they add a semantic layer regardless. There may even be a microformat you can use in some cases.
You can also use attribute selectors to style inputs nicely:
input[type="text"], input[type="password"] {
border: 1px solid #ccc;
background: #fff;
}
input[type="submit"], input[type="reset"] {
border: 1px solid #666;
background: #ccc;
}
I do try and keep html markup to a minimum.
HTML forms are the hardest thing to keep html and css to a minimum, as it is very hard to target all the various inputs across all browsers without adding classes to them, such as Textbox to textboxes etc.
If all your forms for that site use simple textboxes and not much of anything else, the minimal mark-up approach works just fine. However controls with complex mark-up such as the telerik RAD controls don't play with simple mark-up and often extra markup and classes are needed.
These small tricks add mark-up, but also make the css much cleaner and will no doubt making styling such elements much easier.
For other general html/css, I tend to use as few classes as possible, such as
.Menu {}
.Menu li {}
.Menu li a {}
This sort of pattern can be re-used a lot for repeated data, and templates can be made and designed with very little html mark-up.
Sometimes its un-avoidable adding classes and whatnot, but I think if your generally thinking about both css and html you should end up with slick markup.
From site to site, I rarely re-use CSS. Its so quick and easy knocking up styles for whatever you wish, re-designing an existing skin to fit a new site is often not worth it IMO.
Mainly with CSS I tend to take the knowledge i've learnt from previous sites and apply it to the new sites, to make coding for all browsers easy :)
After many years, I've arrived at:
<fieldset>
<div>
<label for="Whatever">A text field</label>
<input type="text" id="Whatever" />
</div>
<div class="required">
<label for="RequiredField">A required field</label>
<input type="text" id="RequiredField" />
</div>
<div class="stretch">
<label for="LongField">A long field (stretched across 100% form width)</label>
<input type="text" id="LongField" />
</div>
<div class="cmd">
<button type="submit">Do whatever</button>
</div>
<fieldset>
Additionally, I have two CSS classes that I can apply:
fieldset div {
clear: both;
}
fieldset.block label {
display: block;
font-weight: bold; /* labels above fields */
}
fieldset.aligned label:first-child {
width: 20%;
float: left;
}
fieldset.block .stretch input,
fieldset.block .stretch textarea,
fieldset.block .stretch select {
width: 100%;
}
fieldset.aligned .stretch input,
fieldset.aligned .stretch textarea,
fieldset.aligned .stretch select {
width: 79%; /* leave space for the label */
}
Personally I just do:
<form>
<label for="foo">Foo</label>
<input type="text" id="foo" name="foo" />
<br />
<label for="foo2" class="block">Foo 2</label>
<textarea id="foo2" name="foo2"></textarea>
<br />
Then for css it depends whether or not I want the element to be inline with it or not
form label.block{
display: block;
}
Or you can block + float them like #DisgruntledGoat wrote. (I really hate extra markup)