Unverified Commit 7c6a0db8 authored by Gaël Poupard's avatar Gaël Poupard Committed by GitHub
Browse files

Floating labels examples in IE (#30965)


* docs(example): drop IE workaround since it works fine in IE

* Serial comma

Co-authored-by: default avatarXhmikosR <xhmikosr@gmail.com>
Co-authored-by: default avatarMark Otto <markd.otto@gmail.com>
6 merge requests!36532My v4 dev,!34086v4: Fix prevented show event disables modals with fade class from being displayed again,!33729V4 dev,!33086V4 dev,!31901Add opacity utilities,!31513Update icons.md
Showing with 13 additions and 12 deletions
+13 -12
......@@ -67,11 +67,23 @@ body {
color: transparent;
}
.form-label-group input:not(:-ms-input-placeholder) {
padding-top: 1.25rem;
padding-bottom: .25rem;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: 1.25rem;
padding-bottom: .25rem;
}
.form-label-group input:not(:-ms-input-placeholder) ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
......@@ -89,14 +101,3 @@ body {
color: #777;
}
}
/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.form-label-group > label {
display: none;
}
.form-label-group input:-ms-input-placeholder {
color: #777;
}
}
......@@ -9,7 +9,7 @@ include_js: false
<div class="text-center mb-4">
<img class="mb-4" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, Firefox, and IE 10/11 (prefixed).</a></p>
</div>
<div class="form-label-group">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment