This question already has answers here:
Change a HTML5 input's placeholder color with CSS
(43 answers)
Closed 2 years ago.
As per an answer to a stackoverflow question. I added a placeholder to html select element.
<option value="" selected disabled hidden><strong style="color:white">Choose here</strong></option>
Now the problem is, I want to change the color of placeholder text to white as my background is gray. It's not accepting any styling.
You can use ::placeholder pseudo in CSS, like this example:
::placeholder { color: #fff; }
If you want a cross-browser solution, you can use prefixes:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
The ::placeholder selector only selects the placeholder text inside your input, besides that, you can style the input itself when it is showing the placeholder using :placeholder-show.
Also, be aware that Firefox might show placeholder text lighter than it is supposed to display. to fix the issue you can use:
::-moz-placeholder {
opacity: 1;
}
is it googles material design ?
if its google material design i find that this answer is your solution i dont want to take credit of someone else afford so there is the link click here
if its not material design anyway did you try this?
::placeholder {
color: white;
}
its called pseudo\elements
you can read abut them here
the example that i wrote is taken from here
Related
This question already has answers here:
change placeholder text color of textarea
(4 answers)
Closed 4 years ago.
i am trying to change input and textarea placeholder color. but it is just work on input. it is does not work on textarea placeholder color. how can i change textarea placeholder color?[enter image description here][1]
https://i.stack.imgur.com/8esKN.png
https://i.stack.imgur.com/VCvE3.png
I had the same prob before.
try this here:
textarea::-webkit-input-placeholder {
color: #0bf;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: #0bf;
}
textarea::-moz-placeholder { /* Firefox 19+ */
color: #0bf;
}
textarea:-ms-input-placeholder {
color: #0bf;
}
found on
change placeholder text color of textarea
In an Electron webview using findInPage, can you use css to change the result colors?
In the above image, the current find result is highlighted in orange while additional results are highlighted with yellow. I'd like to tweak the styling of both of these
body{
background-color:#000;
color:#fff;
}
h2::-moz-selection { /*Firefox*/
color: #000;
background: #FF9800;
}
::-moz-selection { /*Firefox */
color: #000;
background: yellow;
}
h2::selection {
color: #000;
background: #FF9800;
}
::selection {
color: #000;
background: yellow;
}
<h2>Select some text on this page:</h2>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
In Electron you can use stopfindInPage to stop the find and focus/activate a selection (activateSelection - Focus and click the selection node). As it is also possible to insert css, this may allow you to insert css to update the color/ bg=color of the selected text, by using something like the following :
::selection {
background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ffb7b7; /* Gecko Browsers */
}
I haven't tried it, it's just a suggestion from looking at the API.
There is an interesting article on css tricks that you may also find useful
Hope this helps, and that you find a solution
EDIT:
If you are on mac you could use setUserDefault in the system preferences.
In addition, if you use Nathan Buchar's electron settings, you can use the set method to adjust key values (in mac/windows/linux - see his faq)
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)
I'm trying use a Bootstrap 3 template and change how highlighted text looks.
By Default, when you select a word with a mouse, it is blue with a white background. I wanted to change only the blue color to sort of red, but when I use the following css, it overwrites whole styling:
::-moz-selection { /* Code for Firefox */
color: rgba(217,83,79,0.50);
}
::selection {
color: rgba(217,83,79,0.50);
}
Here's an example:
I've searched CSS files of bootstrap and the template but I can't find any styling. I was searching for ::selection. How can I find it?
You should specify both the color and the background of the selected text.
Warning: Browser implementation of ::selection is not standardized and the spec for css 4 is not yet approved. That said, according to caniuse ::selection, browser support looks pretty good.
Here's an example of the code below as run in several browsers. Notice that FF and IE by default will theme selections based on the background color to make them more noticeable, while chrome will not. Chrome will also prevent any truly white selection background against a dark themed background.
Here's a Demo in Stack Snippets
.dark { color: #fff; background-color: #333;}
.light { color: #333; background-color: #fff;}
::-moz-selection { color: #D9534F; background: #fff; }
::selection { color: #D9534F; background: #fff; }
<div class="dark" >Dark-Themed </div>
<div class="light">Light-Themed</div>
Here's a Demo in jsFiddle
For more info, read up on MDN on the ::selection psuedo-element or on this article on CSS-Tricks
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;
}