i have this form:
:-moz-placeholder {
/* Firefox 18- */
color: white;
}
<form id="myForm" action="#" method="post">
<div class="container">
<div class="row">
<div class="col-md-6 padding-2">
<textarea class=" form-control textArea" rows="7" placeholder="Comments/Requests" name="textarea" id="textarea" required="required"></textarea>
</div>
</div>
</div>
placeholder not changing in textarea i tried this css tricks:
the body have a blue background color and the placeholder should be white, it is showing gray...any help? i am new to web development... thanks in advance
From the documentation:
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
and
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
and
Note: Firefox 51 replaced this feature with the standard :placeholder-shown pseudo-class.
Related
I have a site (www.jamesalder.co.uk) which is not rendering properly in IE8 and below.
Here it is in IE8:
And in IE9 and everything else:
As you can see, the search box has moved from top right to the wrong place.
The html for the search box is:
<div id="header">
<img src="/media/header_images/ts-hutton_2.jpg" title="Victorian Paintings at James Alder Fine Art" alt="Victorian Paintings at James Alder Fine Art" "="">
<form id="search-form" action="/search">
<label id="search-label">Search the Site</label>
<input type="image" src="/static/images/sign-up.gif" value="search" id="search-button">
<input type="text" name="q" id="search-input">
</form>
</div>
It seems as though it is totally missing out the following CSS, in that if I disable this CSS, it has the same effect:
#search-form {
position: absolute;
right: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.6);
padding: 3px;
}
Does IE9 have some kind of problem with CSS on forms? Should I put it in a div?
As for the images below that which have decided not to float any more, I have no idea.
Are there any best practices or good resources about getting sites to behave across older versions of IE, or should I just use conditionals?
It was actually caused by malformed html. I had tags which looked like this:
<img src="/media/homepage_images/all-paintings-sale.jpg"
alt="All Victorian Paintings for Sale"
title="All Victorian Paintings for Sale" ">
Notice the " at the end, which was causing everything following it to be treated as text.
Bizarrely, IE9 and everything else fixed the error automatically but IE8 and below didn't.
It may cause by <form>.
Put your <form id="search-form" action="/search"> element in a div.
<div id="header">
<img src="..."/>
<div id="search-form">
<form action="/search"></form>
</div>
</div>
Try this please.
I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}
Any idea why this is working in Safari, but not Firefox and Chrome?
HTML:
<input type="search" placeholder="Search" id="search" name="search" id="s" data-icon="s">
CSS:
#search[data-icon]:before {
font-family: 'Pictos Custom';
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
}
Any help appreciated.
Keep in mind you can't use pseudo-elements on replaced elements which includes <img> <select> <input> <object> etc. basically elements that have no content
Refer to the Visual Formatting Model in the 2.1 Spec for more info
I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML
<form name="" id="" action="" method="post">
<div id="my_form">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<form>
and here's my CSS
#my_form div label{width:200px;display:inline-block;}
any ideas how I can force the label width, they seem to collapse
Try this:
#my_form div label{width:200px; display:block; float:left;}
See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.
try:
#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}
After some head-scratching and research, I've found it's because
labels are inline elements, which according to CSS documentation
should ignore width styling. So, as usual, IE is doing it wrong and
Chrome and Firefox are doing it right.
...
set its display property to something other than inline. I've found display: inline-block is the best for achieving what you're going for.
http://doctype.com/firefox-chrome-ignore-widths-my-labels
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)