I'd like to have the following written in css where the underline is positioned lower down than the other letters.
Almost like a vertical indentation
co_defy
It would be great to have the dash at the same level as the bottom of the y.
Is this possible?
Simply adjust vertical-align of the underscore
body {
font-size:60px;
font-family:arial;
}
span {
vertical-align:middle;
}
co<span>_</span>defy
You can also use custom values to adjust like you want:
body {
font-size: 60px;
font-family: arial;
}
span {
vertical-align: -0.1em;
}
co<span>_</span>defy
Use the text-underline-position property in CSS. Like so:
.example {
text-decoration: underline;
text-underline-position: under;
-ms-text-underline-position: below;
}
As you can see, IE and Edge have a different syntax for the property. Hope this works!
Another way to do it is as such:
body {
font-size: 50px;
}
span {
vertical-align: middle;
}
co<span>_</span>defy
Let us say I have the following setup,
.block
.block__header
.block__content
.block__footer
Now I want to show an active state of this block. Let us say the block itself gets a green background and element 2 and 3 should get bold text. As I understand the philosophy of BEM, one should not use child selectors in order to keep the specificity as low as possible.
So is this really the way to do it?
.block.block--active
.block__header
.block__content.block__content--active
.block__footer.block__footer--active
Update: and how would I write that solution in SASS (very new to it)? This my setup so far... if I can use nested selectors, what is best practice here?
.block {
&--active {
}
&__header {
}
&__content {
// active modifier of content
&--active {
font-weight: bold;
}
// would be the same as
.block--active & {
font-weight: bold;
}
// but can i reference the active block somehow else in sass?
// & is a parent selector but i would need the parent of the parent here...
}
&__footer {
&--active {
}
}
}
The philosophy of BEM is about to keep blocks context free. The low specificity is just a good practice, not a golden rule. I give three valid solutions below.
If you're sure the block cannot be recursively included in itself, a simple cascade can be used:
.block--active {
background-color: green;
}
.block--active .block__element-2,
.block--active .block__element-3 {
font-weight: bold;
}
If the elements are directly located in the block, the children selector is valid:
.block--active {
background-color: green;
}
.block--active > .block__element-2,
.block--active > .block__element-3 {
font-weight: bold;
}
Or the flat solution (but not DRY):
.block--active {
background-color: green;
}
.block__element-2--active,
.block__element-3--active {
font-weight: bold;
}
With SCSS, there are several ways to write the first solution. Here is the one I use:
.block {
&--active {
background-color: green;
}
&--active &__element-2,
&--active &__element-3 {
font-weight: bold;
}
}
See another solution here.
I have a .tintTile that depends on parent, hence the & sas follows:
// Tint titles
.tintTitle {
text-transform: uppercase;
font-family: #fontDemiBold;
color: #colorOrangeKWS;
.Windows7 & {
font-family: arial, sans-serif;
font-weight: bold;
color: #colorOrangeKWS;
}
}
In many others classes, I use the .tintTitle as follows:
// titles, orange bold
.tab {
&>div {
.tintTitle;
// etc.
}
}
Unfortunately, I can't achieve the .Windows7 (provided the fact Windows7 is a class set to the body tag as follows:
<body class="Windows7">
<p class="tintTitle">Good, it works</p>
<div class="tab">
<div>This title doesn't make it</div>
Is there a way to achieve my goal with less beside duplicating every .tintTitle where it's required?
As far as i understand your question your code should work in Less, see http://codepen.io/anon/pen/KwNWmq
Less code:
// Tint titles
.tintTitle {
text-transform: uppercase;
color: green;
.Windows7 & {
text-transform: initial;
color: red;
}
}
.tab {
&>div {
.tintTitle;
// etc.
}
}
Your are using the parent selectors feature of Less to change the selector order
The only thing you should notice will be that properties set for your (not having .windows) will be also applied for your .windows selectors. That's why i have to set text-transform: initial;, otherwise the .windows * also get uppercased cause the also match .tintTitle.
I've set bootstrap wysiwyg inside a popover. Here's the DEMO. Now if I add this:
* { font-weight: bold; }
#editor { font-weight: normal; }
It screwes up the bold directive entirely. Check it out. I tried #editor *, .popover * and other variations but nothing helps. Any ideas?
My current solution for this is instead of this:
* { font-weight: bold; }
to do this:
html { font-weight: bold; }
It might require me some extra work down the road, but it solves my problem.
DEMO
Two questions:
I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. JSFiddle demo
Another question is how do I change placeholder color not globally. That is, I have multiple fields, I want only one field to have white placeholder, all the others remain in default color.
html:
<form id="search-form" class="navbar-form navbar-left" role="search">
<div class="">
<div class="right-inner-addon"> <i class="icon-search search-submit"></i>
<input type="search" class="form-control" placeholder="search" />
</div>
</div>
</form>
css:
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
background-color:#303030;
font-size: 13px;
color:white;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 12px;
/* pointer-events: none; */
cursor: pointer;
color:white;
}
/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18
:-moz-placeholder { color: white; }
FF 19+
::-moz-placeholder { color: white; }
IE 10+
:-ms-input-placeholder { color: white; }
Assign the placeholder to a class selector like this:
.form-control::-webkit-input-placeholder { color: white; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge */
It will work then since a stronger selector was probably overriding your global. I'm on a tablet so i cant inspect and confirm which stronger selector it was :) But it does work I tried it in your fiddle.
This also answers your second question. By assigning it to a class or id and giving an input only that class you can control what inputs to style.
There was an issue posted here about this: https://github.com/twbs/bootstrap/issues/14107
The issue was solved by this commit: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5
The solution therefore is to override it back to #999 and not white as suggested (and also overriding all bootstraps styles, not just for webkit-styles):
.form-control::-moz-placeholder {
color: #999;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
A Possible Gotcha
Recommended Sanity Check - Make sure to add the form-control class to your inputs.
If you have bootstrap css loaded on your page, but your inputs don't have the
class="form-control" then placeholder CSS selector won't apply to them.
Example markup from the docs:
I know this didn't apply to the OP's markup but as I missed this at first and spent a little bit of effort trying to debug it, I'm posting this answer to help others.
I'm using Bootstrap 4 and Dennis Puzak's solution does not work for me.
The next solution works for me
.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; } /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge*/
Bootstrap has 3 lines of CSS, within your bootstrap.css generated file that control the placeholder text color:
.form-control::-moz-placeholder {
color: #999999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999999;
}
.form-control::-webkit-input-placeholder {
color: #999999;
}
Now if you add this to your own CSS file it won't override bootstrap's because it is less specific. So assmuning your form inside a then add that to your CSS:
form .form-control::-moz-placeholder {
color: #fff;
opacity: 1;
}
form .form-control:-ms-input-placeholder {
color: #fff;
}
form .form-control::-webkit-input-placeholder {
color: #fff;
}
Voila that will override bootstrap's CSS.
The others did not work in my case (Bootstrap 4). Here is the solution I used.
html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }
If we use a stronger selector (html first), we don't need to use the hacky value !important.
This overrides bootstraps CSS as we use a higher level of specificity to target .form-control elements (html first instead of .form-control first).
I think qwertzman is on the right track for the best solution to this.
If you only wanted to style a specific placeholder, then his answer still holds true.
But if you want to override the colour of all placeholders, (which is more probable) and if you are already compiling your own custom Bootstrap LESS, the answer is even simpler!
Override this LESS variable:
#input-color-placeholder
Boostrap Placeholder Mixin:
#mixin placeholder($color: $input-color-placeholder) {
// Firefox
&::-moz-placeholder {
color: $color;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
}
now call it:
#include placeholder($white);
You should check out this answer : Change an HTML5 input's placeholder color with CSS
Work on most browser, the solution in this thread is not working on FF 30+ for example
With LESS the actual mixin is in vendor-prefixes.less
.placeholder(#color: #input-color-placeholder) {
...
}
This mixin is called in forms.less on line 133:
.placeholder();
Your solution in LESS is:
.placeholder(#fff);
Imho the best way to go. Just use Winless or a composer compiler like Gulp/Grunt works, too and even better/faster.