CSS
input[type=text] {font-size:1.5em;}
HTML
<input type="text" placeholder="some text">
The CSS code makes 1.5em size for data, which is entered in the text box. But this code also changes size of placeholder text. How to prevent CSS from changing placeholder text's size?
I want CSS to, only change size of original data, which entered by my website visitors.
Reset the values with ::placeholder pseudo
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-size: 0.5em;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 0.5em;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 0.5em;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-size: 0.5em;
}
::-ms-input-placeholder { /* Microsoft Edge */
font-size: 0.5em;
}
<input type="text" placeholder="some text">
Credits: Change an HTML5 input's placeholder color with CSS
Related
CSS Buttons when viewed on windows desktop or apple mac have a default background color of grey (#DDD) but when viewed on ios mobile, the default background color is transparent. This can be fixed by manually adding css background color as #DDD but still why does this happen? Any Ideas?
They look different because browsers have different renderings of CSS.
I recommend to use -webkit and -moz to avoid this type of problem.
.btn{
-webkit-background-color: #DDD;
-moz-background-color: #DDD;
background-color: #DDD;
}
Different browsers have different styles for buttons, select dropdown, input file upload buttons.
These styles are taken from the default stylesheets present in the browser.
In order to avoid these default stylings, you have to reset the styles using CSS reset stylesheets like Normalize CSS, Meyers CSS reset.
Reset for button only
button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
line-height: normal;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable `input` types in iOS */
-webkit-appearance: none;
}
/* Remove excess padding and border in Firefox 4+ */
&::-moz-focus-inner {
border: 0;
padding: 0;
}
In the pop up drop down which opens up when typing starts on a html form. How can I capitalise all characters in each line of the list shown which reveals the previously entered values?
The following only make the first letter upper case.
input#plate {
text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
text-transform: none;
}
<input type="text" id="plate" autocapitalize="characters" placeholder="Enter Plate">
edit
Changing the none in the css to uppercase did not do it either.
The autofill drop-down list is a part of the browser user interface itself, so unfortunately its appearance can’t be modified. In this respect, it’s like a context menu.
The ::placeholder pseudo-element can be used to style a placeholder text, like the one in the Stack Overflow’s search field (Search Q&A) in the page header.
On wiki page of text-angular github project, it says:
https://github.com/fraywing/textAngular/wiki/Styling-the-Editor
I tried with this code:
<div text-angular="text-angular" ta-toolbar="[]" ng-model="message"
placeholder="<div class='placeholder'>Write Coment...</div>"></div>
But the screen will show as:
placeholder show as raw html
I tried the following after taking a look at this website: https://css-tricks.com/almanac/selectors/p/placeholder/
::-webkit-input-placeholder { color: red; }
It still didn't work. How can I give custom styles to my input placeholder?
placeholders should be used with input elements and not on divs. You'd probably have to change your div tags to inputs.
You had the right idea about styling a placeholder, but you may need to adjust the vendor prefixes depending on your browser
Chrome, Safari, Opera, Edge): ::-webkit-input-placeholder
Firefox 4 through 18: :-moz-placeholder (Only one colon)
Firefox 19+: ::-moz-placeholder (two colons)
IE 10 and IE 11 :-ms-input-placeholder
/* Chrome, Safari, Opera and Edge */
::-webkit-input-placeholder { color: red; }
/* Firefox 4 through 18 */
:-moz-input-placeholder { color: red; }
/* Firefox 19+ */
::-moz-input-placeholder { color: red; }
/* IE10 and IE11 */
:-ms-input-placeholder { color: red; }
<input placeholder="Content here" />
Another thing you could try is to attach a contenteditable property to your div which will make it behave kind of like an input element. You can then set a data property to simulate the behavior of a placeholder.
Use the before pseudo selector which will target the div only when it's empty and not focused on.
[contenteditable=true]:empty:not(:focus):before{
content:attr(data-text);
color: red;
}
div {
border: 1px solid black;
}
<div contenteditable="true" data-text="Enter text here"></div>
I found a way myself.. To let the Answer part standing out to other similar questions, I choose to post answer here instead of editing original question.
Use .placeholder-text class. It's not a customized class but it's the temporary class used by text-angular when it is displaying placeholder.
.ta-bind {
&.placeholder-text {
color: red;
}
&:not(.placeholder-text) {
color: black;
}
}
( Example is in scss, remember to covert if you are using css)
everyone!
[edit]
Take a look at the fiddle I created, it looks like inside footer element placeholder styling is not working. Any idea how to overcome this?
I tried to use:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #3d3d3d!important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #3d3d3d!important;
opacity: 1!important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #3d3d3d!important;
opacity: 1!important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #3d3d3d!important;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #3d3d3d!important;
}
as well as:
footer::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #3d3d3d!important;
}
and it didn't help.
Keep in mind I want a separate color for placeholder text and for input text typed by the user.
Any idea where to start?
OK, it was really stupid one. There was a javascript added to input element:
<input type="text" name="woochimp_widget_subscription[email]" id="woochimp_widget_subscription_email" class="woochimp_widget_field" required="" value="Enter your email..." onfocus="this.value='';" onblur="if(this.value=='')this.value='Enter your email...';" />
after removing the js code and adding placeholderattribute:
<input type="text" name="woochimp_widget_subscription[email]" id="woochimp_widget_subscription_email" class="woochimp_widget_field" required="" value="Enter your email..." placeholder="Enter you email..." />
it started to work just nice.
Thank you All for your help!
It may not make a difference, but try moving the comments so that they fall outside the style declarations.
Also, don't forget to include:
::-ms-input-placeholder {color: #3d3d3d;} /* Edge */
Full styles:
::-webkit-input-placeholder {color: #3d3d3d;} /* WebKit, Blink and Opera */
:-moz-placeholder {color: #3d3d3d; opacity: 1;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder {color: #3d3d3d; opacity: 1;} /* Mozilla Firefox 19+ */
:-ms-input-placeholder {color: #3d3d3d;} /* Internet Explorer 10-11 */
::-ms-input-placeholder {color: #3d3d3d;} /* Edge */
:placeholder-shown {color: #3d3d3d;} /* CSS Level 4 Selector */
#coupon_code::-moz-placeholder {
color: #d3d3d3!important;
opacity: 1!important;
}
i have change above css line in your fiddle, hope this will help you.
I have your basic input with a placeholder. I have the placeholder text color as a light gray. However, when I click inside the input and type something, the color stays the same. Is there a way I can change the color of the text when something is type and when it is not typed?
<input type="text" placeholder="Your Name">
Unfortunately there is no native way just yet to do this that covers all the browsers. You can use vendor specific css rules however as seen in this jsfiddle.
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}