Bootstrap v2.3.1 - less placeholder styles working on chrome but not working on Mozilla latest version
Please help
Less code here
.placeholder(red);
Mozilla Updated Syntax
In the version 19.0 release notes, it states it changed the -moz-placeholder from being a pseudoclass (:-moz-placeholder) to a pseudoelement (::-moz-placeholder, note the double colons) which was implementing this bug fix. Apparently it was not made backwards compatible, because the double-colon syntax works in this fiddle but the single colon syntax does not.
However, Bootstrap at present (6-6-2013) has the pseudoclass (single colon) version in its mixin (line 83 as of this writing). So you need to either go in an manually fix the mixins.less file of bootstrap to correct it to the new syntax (not my first choice), or create your own override mixin to also add the new syntax, like so (better choice):
.placeholder(#color: #placeholderText) {
&::-moz-placeholder {
color: #color;
}
}
Once bootstrap is updated to version 3, then you can get rid of your override mixin.
change mixins file
// Placeholder text
// -------------------------
.placeholder(#color: #placeholderText) {
&:-moz-placeholder {
color: #color;
}
&:-ms-input-placeholder {
color: #color;
}
&::-webkit-input-placeholder {
color: #color;
}
&::-moz-placeholder { // this for latest mozilla
color: #color;
}
}
<style>
::-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;
}
<style>
<input type="email" placeholder="anytext">
Related
Is there a way to override a css for only Safari browser?
I am using Safari version 15.1 but looking to be able to target any version.
Tried the following via codepen. But it does not override in Safari.
.myClass {
background-color: grey;
color: red;
width: 2000px;
height: 50px;
}
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) {
.safari_only {
.myClass {
background-color: yellow;
color: green;
width: 2000px;
height: 50px;
}
}
}}
<html>
<body>
<div class="myClass">
Sample 1
</div>
</body>
</html>
Seen examples such as following explaining safari overrides.
But these are not overriding a css class.
is there a css hack for safari only NOT chrome?
How do I add a css line ONLY for Safari
CSS hack for Safari ONLY
https://solvit.io/bcf61b6
-webkit-appearance is (luckily or not) also supported by Firefox and Edge as mentioned in the mozilla documentation.
Only thing I can imagine to work is to use JavaScript to target the user agent:
function detectBrowser() {
if (navigator.userAgent.includes("Safari")) {
// your code here
}
}
Been fighting with ng-smart-table trying to find an elegant way to remove the Column Filter placeholder without overriding the javascript. I know i can modify node_modules the module within that directory but i need to modify this inside the component. Any ideas?
Here are my column settings. I've tried to modify the cell but nothing seems to override the placeholder which displays the name of the column.
public settings: any = {
actions: false,
noDataMessage: 'Loading... please wait!',
filtering: {filterString: ''},
className: ['table-striped', 'table-bordered'],
columns: {
customerName: {
title: 'Account',
class: 'topHeading',
},
}
I had the same problem just now and couldn't find any good workarounds posted anywhere. I ended up making the color of the placeholder the same color as the background of the input to "hide" the placeholder.
// Hide the placeholders in all browsers
.ng2-smart-filter input::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff;
}
.ng2-smart-filter input::-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
}
.ng2-smart-filter input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff;
}
.ng2-smart-filter input::-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff;
}
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 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;
}