Rectangle 27 173

I think this quote from the HTML 5 Reference Draft provides the answer:

Some elements, however, are forbidden from containing any content at all. These are known as void elements. In HTML, the above syntax cannot be used for void elements. For such elements, the end tag must be omitted because the element is automatically closed by the parser. Such elements include, among others, br, hr, link and meta

<link type="text/css" rel="stylesheet" href="style.css">

In XHTML, the XML syntactic requirements dictate that this must be made explicit using either an explicit end tag, as above, or the empty element syntax. This is achieved by inserting a slash at the end of the start tag immediately before the right angle bracket.

<link type="text/css" href="style.css"/>

Authors may optionally choose to use this same syntax for void elements in the HTML syntax as well. Some authors also choose to include whitespace before the slash, however this is not necessary. (Using whitespace in that fashion is a convention inherited from the compatibility guidelines in XHTML 1.0, Appendix C.)

So, the answer is to code preferably without slash and space, but having the slash (with or without the space)--is optional?

I love the way the specification isn't particularly specific (on this point) "meh, do what you want!"

Since it's optional, I like more the /> because it is good for the readability.

I like explicitly closing my tags for no reason other than it feels right and makes sense when I'm reading/writing code. I'm pleased that the HTML5 Reference Draft agrees with me.

html5 - HTML 5: Is it
,
, or
? - Stack Overflow

html html5
Rectangle 27 173

I think this quote from the HTML 5 Reference Draft provides the answer:

Some elements, however, are forbidden from containing any content at all. These are known as void elements. In HTML, the above syntax cannot be used for void elements. For such elements, the end tag must be omitted because the element is automatically closed by the parser. Such elements include, among others, br, hr, link and meta

<link type="text/css" rel="stylesheet" href="style.css">

In XHTML, the XML syntactic requirements dictate that this must be made explicit using either an explicit end tag, as above, or the empty element syntax. This is achieved by inserting a slash at the end of the start tag immediately before the right angle bracket.

<link type="text/css" href="style.css"/>

Authors may optionally choose to use this same syntax for void elements in the HTML syntax as well. Some authors also choose to include whitespace before the slash, however this is not necessary. (Using whitespace in that fashion is a convention inherited from the compatibility guidelines in XHTML 1.0, Appendix C.)

So, the answer is to code preferably without slash and space, but having the slash (with or without the space)--is optional?

I love the way the specification isn't particularly specific (on this point) "meh, do what you want!"

Since it's optional, I like more the /> because it is good for the readability.

I like explicitly closing my tags for no reason other than it feels right and makes sense when I'm reading/writing code. I'm pleased that the HTML5 Reference Draft agrees with me.

html5 - HTML 5: Is it
,
, or
? - Stack Overflow

html html5
Rectangle 27 258

Your solution shows the issue here -- play is not a jQuery function but a function of the DOM element. You therefore need to call it upon the DOM element. You give an example of how to do this with the native DOM functions. The jQuery equivalent -- if you wanted to do this to fit in with an existing jQuery selection -- would be $('#videoId').get(0).play(). (get gets the native DOM element from the jQuery selection.)

That's great, works perfectly, thanks indeed. Good to understand the DOM better also.

Using JQuery to control video in this way seems to cause problems with playback on the iPhone. I have the video element in a tab, the jquery reveals this, but then clicking on the video start arrow does not start the clip. When I remove the $('#videoId').get(0).play() line there is no problem. What is the best way around this? I was thinking I could remove the js with a condtional statement for iOS - the video will not autostart for iOS devices anyway so would be happy to do this - or is there a simpler solution? Any help much appreciated.

How can I make this pause all the <video> elements on a page?

@russellsayshi - no, that will only play ONE video; prismspecs asked for ALL videos. Correct syntax: $('video').each(this.play()); to play all; $('video').each(this.pause()); to pause all. each() is a jQuery function, what is passed into it is a javascript function, that is applied to each element. As each element is handled, this represents that element.

If only want the first element, can simplify by replacing .get(0) with [0]. So $('video')[0].play(); or for a specific id $('#videoId')[0].play();.

Play/pause HTML 5 video using JQuery - Stack Overflow

jquery html css html5 html5-video
Rectangle 27 4292

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. [Ref]
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. [Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-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;
}
<input placeholder="Stack Snippets are awesome!">
opacity: 1
  • Note that placeholder text is just cut off if it doesnt fit size your input elements in em and test them with big minimum font size settings. Dont forget translations: some languages need more room for the same word.
  • Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
  • Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:
[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Note also that although Webkit considers this to have rather strong specificity, Mozilla does not. You are likely to have to pop a few !importants in there to get things to show up.

@toscho: thanks for the great answer. I just needed a little demonstration of it "live", so your example can also be reached here: jsfiddle.net/Sk8erPeter/KyVXK. Thanks again.

Firefox's placeholder appears to be defaulting with a reduced opacity. For anyone else hard-refreshing and wondering why the heck this doesn't appear to be working ("why is my white text still grey.."), use opacity:1

*:-ms-input-placeholder
:-ms-input-placeholder
INPUT:-ms-input-placeholder

Note for Bootstrap 3: "form-control" class overrides the color due to CSS specificity (i.e. "form-control::-webkit-input-placeholder"), so you need to be at least as specific or use "!important" in your CSS. (this was hell to debug as neither Firebug nor Devtools seem to show this pseudo class)

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 4285

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. [Ref]
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. [Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-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;
}
<input placeholder="Stack Snippets are awesome!">
opacity: 1
  • Note that placeholder text is just cut off if it doesnt fit size your input elements in em and test them with big minimum font size settings. Dont forget translations: some languages need more room for the same word.
  • Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
  • Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:
[type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Note also that although Webkit considers this to have rather strong specificity, Mozilla does not. You are likely to have to pop a few !importants in there to get things to show up.

@toscho: thanks for the great answer. I just needed a little demonstration of it "live", so your example can also be reached here: jsfiddle.net/Sk8erPeter/KyVXK. Thanks again.

Firefox's placeholder appears to be defaulting with a reduced opacity. For anyone else hard-refreshing and wondering why the heck this doesn't appear to be working ("why is my white text still grey.."), use opacity:1

*:-ms-input-placeholder
:-ms-input-placeholder
INPUT:-ms-input-placeholder

Note for Bootstrap 3: "form-control" class overrides the color due to CSS specificity (i.e. "form-control::-webkit-input-placeholder"), so you need to be at least as specific or use "!important" in your CSS. (this was hell to debug as neither Firebug nor Devtools seem to show this pseudo class)

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 83

In addition to toscho's answer I've noticed some webkit inconsistencies between Chrome 9-10 and Safari 5 with the CSS properties supported that are worth noting.

background-color
border
text-decoration
text-transform

The full cross-browser comparison is here.

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 83

In addition to toscho's answer I've noticed some webkit inconsistencies between Chrome 9-10 and Safari 5 with the CSS properties supported that are worth noting.

background-color
border
text-decoration
text-transform

The full cross-browser comparison is here.

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 72

HTML5 Apps in 2014

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux. (source)

The folks at github use this to provide their code editor Atom as an app. It has an documented api and a help channel on the official atom forums.

node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

Intel is behind this (?). I've been told it's very rough around the edges.

Brackets Shell, the sandbox of Adobes code editor (and base of Adobe Edge)

Note: The brackets-shell is only maintained for use by the Brackets project. Although some people have definitely had success using it as an app shell for other projects, we don't provide any official support for that and we haven't done a ton of work to make the app shell easily reusable. Many people will likely find it easier to use a project like node-webkit, which is more generic by design.

says the readme, but there are quite a lot of folks out there who did it nevertheless.

Adobe AIR, as another answers suggested.

The Adobe AIR runtime enables developers to package the same code into native apps for Windows and Mac OS desktops as well as iPhone, iPad, Kindle Fire, Nook Tablet, and other Android devices, reaching the mobile app stores for over 500 million devices.

Sencha is a company which sells tools for app developers, including html5 app development and distribution.

XULRunner from Mozilla may do the trick for you but adds some overhead.

Because it is simple and yet powerful. Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and JavaScript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So and focus on the task your application should do.

Bringing web applications to your Desktop Prism is an application that lets users split web applications out of their browser and run them directly on their desktop.

Just a heads up with Adobe Air. If you're planning on using any kind of javascript template solution (i.e. Handlebars, Mustache) most of them don't work due to security errors related to the new function() javascript calls.

thanks for that very useful hint! unfortunately I hadn't the oppurtinity to test out any of the examples listed above yet. I merely collected them via research.

You can make your application run outsize the security sandbox. I had that problem with KendoUI templating system also, and was able to overcome it.Either way I switched from Air to Titanium Desktop, but am currently looking for alternatives since the Windows webkit implementation of TD has serious problems with form elements (inputs / dropdowns).

You can consider Sentenza Desktop to package HTML5/CSS3/JS web application into Mac OS X application (.app). An API library is also available. It dosen't require any frameworks (like Adobe Air or TideSDK). Mac App Store deployment supported.

javascript - Solutions for distributing HTML5 applications as desktop ...

javascript html5 desktop-application
Rectangle 27 613

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
<input    placeholder='hello'/> <br />
<textarea placeholder='hello'></textarea>

This will style all input and textarea placeholders.

Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

MSDN doc you linked to, states its only supported in Internet Explorer 10. Still a good find, but not very useful till IE10 userbase becomes significant (we may be looking at a time-frame of years for that).

Realistically, you are going to want to style placeholders across the site uniformly, not style every individual input by ID.

After FF19 you have to use ::-moz-placeholder

You need to put this CSS at the bottom of you stylesheet, if you also apply a class on the input, in order to get it working on IE (11). See this fork on JSFiddle jsfiddle.net/9kkef. Open the page both in IE and another browser, in IE you will see that the placeholder text will be in the color of the applied class.

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 613

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
<input    placeholder='hello'/> <br />
<textarea placeholder='hello'></textarea>

This will style all input and textarea placeholders.

Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

MSDN doc you linked to, states its only supported in Internet Explorer 10. Still a good find, but not very useful till IE10 userbase becomes significant (we may be looking at a time-frame of years for that).

Realistically, you are going to want to style placeholders across the site uniformly, not style every individual input by ID.

After FF19 you have to use ::-moz-placeholder

You need to put this CSS at the bottom of you stylesheet, if you also apply a class on the input, in order to get it working on IE (11). See this fork on JSFiddle jsfiddle.net/9kkef. Open the page both in IE and another browser, in IE you will see that the placeholder text will be in the color of the applied class.

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 64

Custom Tooltips with pure CSS - no JavaScript needed:

As an alternative to the default title attribute tooltips, you can make your own custom CSS tooltips using :before/:after pseudo elements and HTML5 data-* attributes.

Using the provided CSS, you can add a tooltip to an element using the data-tooltip attribute.

You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top/right/bottom/left).

For instance, the following will add a tooltop positioned at the bottom of the span element.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

You can display the custom tooltips with pseudo elements by retrieving the custom attribute values using the attr() function.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

In terms of positioning the tooltip, just use the attribute selector and change the placement based on the attribute's value.

Full CSS used in the example

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

This was great except doesn't work in IE10 :/

Yes I just tested it and also wasn't surprised it didn't work .Good old IE! ;)

@JoshCrozier it helped a lot

html - How do I add a tool tip to a span element? - Stack Overflow

html css
Rectangle 27 64

Custom Tooltips with pure CSS - no JavaScript needed:

As an alternative to the default title attribute tooltips, you can make your own custom CSS tooltips using :before/:after pseudo elements and HTML5 data-* attributes.

Using the provided CSS, you can add a tooltip to an element using the data-tooltip attribute.

You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top/right/bottom/left).

For instance, the following will add a tooltop positioned at the bottom of the span element.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

You can display the custom tooltips with pseudo elements by retrieving the custom attribute values using the attr() function.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

In terms of positioning the tooltip, just use the attribute selector and change the placement based on the attribute's value.

Full CSS used in the example

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

This was great except doesn't work in IE10 :/

Yes I just tested it and also wasn't surprised it didn't work .Good old IE! ;)

@JoshCrozier it helped a lot

html - How do I add a tool tip to a span element? - Stack Overflow

html css
Rectangle 27 247

You may also want to style textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 247

You may also want to style textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 86

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
@input-color-placeholder

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 86

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
@input-color-placeholder

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 58

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

Thanks, everything else failed in my app as I was using SASS. But this worked!

@content;

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 58

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

Thanks, everything else failed in my app as I was using SASS. But this worked!

@content;

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 46

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />

I had to add !important in Firefox v56 as well

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input
Rectangle 27 46

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />

I had to add !important in Firefox v56 as well

html - Change an HTML5 input's placeholder color with CSS - Stack Over...

html css html5 placeholder html-input