This is driving me nuts. I have a form where I have set the text color to be purple, but for some reason the select text is "stronger" than the input text. Can't figure out why!
http://jsfiddle.net/ZtyHS/
Any suggestions?
My CSS:
.formBox, .normSelect {
color: purple;
font-size: 15px;
padding: 6px 8px 5px;
outline-color: transparent;
-webkit-border-radius: 2px;
border-radius: 2px;
}
What you're seeing is the placeholder, which is the text shown when no value is entered. http://css-tricks.com/snippets/css/style-placeholder-text/ and Change an HTML5 input's placeholder color with CSS explains how to style the placeholder:
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
If you type in the field, you'll notice your input is the same color as the select box text. What's the difference? It's placeholder text. See this answer for a much better explanation than I can give on placeholder styling: https://stackoverflow.com/a/2610741/495935
If you were talking about "Select" text then adding this will work !
font-weight:100;
font-size: 12px;
sroes has mentioned for placeholder !
This is what firefox will do to a 'placeholder' text
input::-moz-placeholder, textarea::-moz-placeholder {
display: inline-block !important;
opacity: 0.54; /* <-- SEE THIS ? */
overflow: hidden !important;
pointer-events: none !important;
resize: none !important;
}
Each and every 'supportive' browser will style by default.
See http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/
Use sroes answer to style your input[placehorder] and you should be ok.
Finaly, to answer your question 'Any suggestions?' : well, yes i have one : let's play chess or parcheesi.
Related
When I try to change the placeholder's color:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
I get the error:
validation (css 4.0): "::placeholder" is not a valid pseudo-element
and
validation (css 4.0): "::-ms-input-placeholder" is not a valid pseudo-element
When I run this code the placeholder of the input remains the same grey color and I'm not really sure where to go from here. I'm using the ASP .NET MVC framework.
This code works with my project.
<style>
.FilterInputs::placeholder {
color: #d2ddec;
opacity: .8;
}
</style>
I am sorry this is a late response and I hope someone coming after this gets to use this, You can simply put the prefix "input" before ::-moz-placeholder and ::-webkit depending on the intended browser
For example :
input::-moz-placeholder { /* Firefox */
color: dimgrey;
opacity: 1;
}
input::-webkit-input-placeholder { /* Chrome */
color: dimgrey;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: dimgrey;
}
:-ms-input-placeholder { /* Microsoft Edge */
color: dimgrey;
}
I'm 99% sure that using ::placeholder without any vendor prefixes is safe. No surprises, when testing on all 3 window and 2 Android browsers -- it works.
Try the following:
☑️ Review my demo ... is the text red?
☑️ Go to your real code and remove all of the extra selectors until there's only one remaining. Ensure that selector has no vendor is prefixes ... the text red?
☑️ Try placing the ::placeholder as the last rule within the </style> tag.
☑️ Increase specificity by doubling. selector input::placeholder::placeholder
input {
display: block;
width: 80%;
outline: #930;
border: inset;
padding: 3px 5px;
margin: 10px auto;
}
input::placeholder {
color: red;
}
input:focus {
outline: 0;
}
<input type="text" placeholder="HUGE RED TEXT AS A PLACEHOLDER">
Suppose I have this text field
<input type="text" placeholder="I am placeholder">
I know with css we can change placeholder color like this but is there any way to change color of one word only.
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
This code will change complete placeholder color but I want to change color of word placeholder only instead on complete I am placeholder
You can take a look at mix-blend-mode :
edit: for nowdays, see and use update below (3rd snippet) with background-clip.
label {
display: inline-block;
background: linear-gradient(to right, red 2.2em, blue 2.2em);
border: inset;
/* border here instead input */
font-family: monospace;
/* less surprise about length of text at screen */
}
input {
box-shadow: inset 0 0 0 2em white;
/* covers the background, needed for the blending */
}
input:invalid {
/* color part of text only when placeholder is shown */
mix-blend-mode: screen;
}
/* snippet disclaimer */
.disclaim {
mix-blend-mode: screen;
}
body {
background: white;
}
<label>
<input placeholder="I am placeholder" required />
</label>
<p class="disclaim">not avalaible yet for <span>'your browser',</span> please be patient.</p>
Else you need to use HTML and text:
label {
display: inline-block;
}
label>span {
position: absolute;
padding-left: 3px;
}
label>span span {
color: blue
}
input {
position: relative;
background: white;
}
input:invalid {
background: none;
}
<label>
<span>I am <span>placeholder</span></span>
<input type="text" required />
</label>
edit 2020
background-clip is now well supported and can be used instead mix-blend-mode
mix-blend-mod trick was a workaround for Firefoxe. Firefoxe understood color:transparent but not background-clip-text; yet ... text was gone.
label {
display: inline-block;
font-family: monospace;
/* less surprise about length of text at screen */
}
input:invalid {
background: linear-gradient(to right, red 2.2em, blue 2.2em);
background-clip:text;
color:transparent;
}
<label>
<input placeholder="I am placeholder" required />
</label>
You can't possibly do it with standard placeholder. Instead make a div and put your input element and one more child(say span/p element) inside this div and position span/p inside your input element and on focus hide the span/p element.
Something like this : link
Hi friends you should us div tag with an attribute of contenteditable="true" instead of input tag and then find its children elements and change their size color etc using javascript.and I think it is the only answer for your question.And if you only want to change the first letter or word color you should use pseudo selectors.
When I open the modal window, the onfocus text value in the textarea is highlighted in blue color.I'm not sure what CSS properties should be used to removed the highlighted onfocus blue color from the text . I tried the below, but it ain't working.
input[type="text"], textarea{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
An alternative to the user-select property suggested by
Marcos is to use the ::selection and ::-moz-selection (on their own rules) to specifically set/unset the color/background of the selected text (without disabling the select functionality).
input[type="text"]::selection,
textarea::selection {
background-color: inherit;
color: red;
}
input[type="text"]::-moz-selection,
textarea::-moz-selection {
background-color: inherit;
color: red;
}
input[type="text"],
textarea {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
<input type="text" value="test value for selection" />
<hr/>
<textarea>test text for selection</textarea>
You can use user-select to avoid the selection of any text
input {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
<input type="text">
Be careful with this, because you are avoiding to select a prompt to users, and it causes accessibility lost.
I have styled placeholder text with CSS using the psuedo elements and pseudo classes below. This gets the job done on all major browsers but Opera. My understanding is Opera does not support styling placeholder text. Does anyone know of a way to style Opera input placeholder text?
CSS
::-webkit-input-placeholder {
color: red;
font-size: 10px;
}
::-moz-placeholder {
color: red;
font-size: 10px;
}
:-moz-placeholder {
color: red;
font-size: 10px;
}
:-ms-input-placeholder {
color: red;
font-size: 10px;
}
input:-moz-placeholder {
color: red;
font-size: 10px;
}
Both existing ways to style placeholder available in Firefox and WebKit are vendor-prefixed and nonstandard and should not be used in production. For future-proofness, use JavaScript to remove placeholder attribute and use either value (in conjunction with a class like placeholder to bind placeholder styles to) of form field or an additional text element to emulate placeholder functionality. This will work consistently across browsers (current and future ones) including Opera.
Opera supports placeholder text styling starting from version 22.0.1471.70 (17 June, 2014), so above CSS works now.
You can style the placeholders like so:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
I would suggest to check this link to check for browser compatibility: https://caniuse.com/#search=input-placeholder
I have a text box, which acts as a search box on my page. I pre-populate the field with the word 'SEARCH' which has a default text colour of #D6D6D0.
Using CSS, is it possible to change the text colour to #FFFFFF when someone enters text in the box?
<input type="text" name="q" value="SEARCH" id="searchFieldText">
#searchFieldText {
background: url("/images/crmpicco/search_bg3.png") no-repeat scroll 0 0 #000000;
border: medium none;
color: #D6D6D0;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
height: 21px;
padding-left: 0;
padding-top: 3px;
width: 168px;
}
The focus pseudo class should work
#searchFieldText:focus {
color: #fff;
}
Using :focus will only apply when the box is currently in focus, when the user comes out of the text box the color will revert.
I would suggest using the placeholder attribute, override the styling for the placeholder to be the #D6D6D0 color you wanted and apply the style you want on the textbox.
You can override the placeholder styling with these psuedo selectors:
::-webkit-input-placeholder {
color: #D6D6D0;
}
:-moz-placeholder {
color: #D6D6D0;
}
::-moz-placeholder {
color: #D6D6D0;
}
:-ms-input-placeholder {
color: #D6D6D0;
}
I made a fiddle that gives you an idea: http://jsfiddle.net/bM5AE/
You can better use placeholder to pre-populate fields, on typing they will be gone, if onblur the field is empty the placeholder comes back.
<input type="text" name="q" placeholder="SEARCH" id="searchFieldText">
And if you wan't to style the placeholder
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
Example
Using the pseudoclass :focus will do the trick for you.
#searchFieldText:focus{
color:#fff;
}
I also recommend you to use the new attribute placeholder for the input field which will do some magic for you (need to be aware of support however).
See the example
hi Try the below code it will work....
$(document).ready(function () {
$("#searchFieldText").keypress(function () {
$("#searchFieldText").css("color", "#ffffff");
});
});