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
Related
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.
When I apply ::after for my <p> element, it works fine, but when I use it for the ::placeholder pseudo-element on my input fields, it doesn't work:
p::after {
content: "*";
color: red;
}
#registerFirstName::placeholder::after {
content: "*";
color: red;
}
<!DOCTYPE html>
<html>
<body>
<input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">
<p>I live in Ducksburg</p>
</body>
</html>
Output:
Can someone help me fixing this?
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
However if using jquery you can use
$(".mystyle").after("add your smiley here");
Psuedo elements do not work on empty elements such as <input>.
There are two problems with your code.
First, the pseudo elements can be set only for elements. Not for other pseudo elements.
Second, as others already mentioned, generated content pseudo elements (::before and ::after) are not supposed to work on empty elements (those that have no content between start and end tags in the markup) and usually they don't (there are some exceptions, but, IIRC, the only browser that allowed these pseudo elements for <input> was Opera with Presto engine).
So to add the asterisk in a cross-browser way, you need an extra element. For example, you can do the following:
/* selecting spans immediately following anything with the "placeholder" attribute */
[placeholder] + span::after{
content:"*";
color: red;
}
<input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">
<span></span>
UPD: Sorry, I missed the part that the asterisk should be next to the placeholder text at first. Unfortunately, it's impossible with CSS. But you can use the floating label pattern instead of the placeholder, which makes it possible to add the asterisk in the needed place with ::after pseudo element, and also improves the accessibility of the form in comparison to the bare placeholder solution.
Mysterious style attribute insert into input type-password tag after page loaded!?
Page source:
<input type="password" placeholder="password">
Style sheet:
input:-moz-placeholder {
color: #999999;
}
After Load (Firebug):
<input type="password" placeholder="password" style="font-weight: 500; font-style: normal; color: rgb(0, 0, 0);">
Screenshot,
Example, http://jsfiddle.net/LaxkL/
Effect, change the placeholder color, and it happens to type=password only
Affected browser, Firefox 13+ (the first version I used on Mac) on Mac OS X
Question, how can I fix this, so all input placeholders have same color?
I'm viewing this on Firefox 16.0.1 and there doesn't seem to be a problem. It's likely something that was fixed as support for the placeholder attribute grew.
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
Hi all I am currently trying to develop an HTML5 and CSS3 website. What I want to be able to do is when a user hovers over an input area of the website I want to be able to display a little pop up message next to the mouse position to display information to the user.
Is this possible, if not with HTML5 and CSS3 but using something else.
Here is a very simplistic solution I use as a base with my forms.
<style>
.help {
background-color: #FFFF73;
border-radius: 10px;
display: none;
opacity: 0.9;
padding: 10px;
z-index: 100;
}
.help_link:hover + span {
display: inline;
}
</style>
<form>
<label>Input: <input type="text" name="text" /></label> Help <span class="help">Some help here on this input field.</span><br />
<label>Input: <input type="text" name="text2" /></label> Help <span class="help">Some help here on this input field.</span><br />
</form>
The usual disclaimers apply: this is a base, will not work in IE without an external library to add advanced selectors, border-radius not supported in Firefox 3.5, etc.
<input type="text" title="info for user here"/>
You can hover over an input text field and the title will allow a tool-tip type message pop up.