How can I format the text of a placeholder in italics, but when someone writes inside the textbox, the text shouldn't be in italics.
code:
<input type="text" id="search" placeholder="Search" style="font-style:italic">
How can I place italic text only on placeholder but not whole input?
Sure. Just apply the style to these CSS rules:
::-webkit-input-placeholder {
font-style: italic;
}
:-moz-placeholder {
font-style: italic;
}
::-moz-placeholder {
font-style: italic;
}
:-ms-input-placeholder {
font-style: italic;
}
Probably not all of these rules are needed. I always just reference CSS Tricks because I always forget how to do it.
Edit: Note that these rules cannot be combined into one selector. They must be declared separately as noted by Dave Kennedy in the comments below.
From MDN, you can use the :placeholder-shown pseudo-class.
input:placeholder-shown {
font-style: italic;
}
This has the advantage of being un-prefixed, and the browser support is decent (92-ish%) at the time of this writing: https://caniuse.com/#feat=css-placeholder-shown.
Another way: the :focus selector is your friend. To make it only for the placeholder use the :not selector. This have the CSS rule only if the input field is NOT current selection.
Define in your CSS :
.class-of-your-input-field:not(:focus) {
font-style:italic;
}
Related
div {
height: 400px;
cursor: pointer;
font-family: sans-serif;
}
<div>
div has pointer and sans-serif font
<p>and paragraph also has it</p>
<code>but code element doesn't have sans-serif font but pointer.</code>
</div>
p element has cursor text and serif as font-family as default. Both are being overridden.
code element has cursor text and monospace as font-family as default. Only cursor has been overridden.
Why does this happen? In code element, the font-family isn't overridden. Why? How can I set default html styles in certain chosen elements? (p and code elements here)
Apparently, even all: revert doesn't work!
div {
height: 400px;
cursor: pointer;
font-family: sans-serif;
}
p {
all: revert;
}
code {
all: revert;
}
<div>
div has pointer and sans-serif font
<p>and paragraph also has it</p>
<code>but code element doesn't have sans-serif font but pointer.</code>
</div>
all: initial works, but I don't want original CSS implementation applied. I want the user agent stylesheet rules applied. I used revert but to no avail.
According to MDN:
By default, the content text is displayed using the user agent's
default monospace font.
and:
A CSS rule can be defined for the code selector to override the
browser's default font face. Preferences set by the user might take
precedence over the specified CSS.
So you do need to specify the font required specifically. If there is worry that the correct setting is not carried forward/may be changed in the future you could define it as a CSS variable so it only needs to have its value changed in one place.
div {
height: 400px;
cursor: pointer;
--font: sans-serif;
font-family: --font;
}
p {
all: revert;
}
code {
all: revert;
font-family: --font;
}
<div>
div has pointer and sans-serif font
<p>and paragraph also has it</p>
<code>and the code element also has sans-serif</code>
</div>
I am trying to highglight part of a title, as you can see above. It doesn't seem to have any effect, how can I achieve what I'm after?
<h1> <strong>BOLD</strong>NOTBOLD</h1>
You could do it by setting the font-weight to normal instead of large which is the default font weight. Here's a snippet.
h1 { font-weight:normal; }
<h1><strong>Bold</strong>Not Bold</h1>
Reset the font-weight of your h1 tag
h1{
font-weight: normal;
}
<h1><strong>BOLD</strong>NOTBOLD</h1>
A header is bold by default, you have to "unbold" it:
h1{
font-weight: normal;
}
<h1>Hello normal <strong>and then bold</strong></h1>
<h1>Bold<span style="font-weight: lighter">Not Bold</span></h1>
Header tags already have made bold, if you still want to highlight it you can use some other properties like make it Italic, set font-color, etc.,
I have a basic html form where label tags are used to define field names and where label tags are used around checkboxes so that a user clicking on the text next to a checkbox also selects the checkbox.
<label>Valid?</label>
<label>
<input type="checkbox" />
Yes
</label>
What CSS is the best practice so that my field name is bold ("Valid?"), but my checkbox descriptor is not bold?
I have tried several variations adding different :not and :empty, but I'm not hitting the right selector - either both are bold or neither are bold. I know my :empty isn't working since the text element messes that up, but there must be a simple way to only bold labels that have only text elements.
label:empty {
font-weight: bold;
}
JS Fiddle: http://jsfiddle.net/z77tq8bs/
You can use the next sibling selector, like this:
label {
font-weight: bold;
}
label + label {
font-weight: normal
}
Check the fiddle: https://jsfiddle.net/8cLuhznb/
The :empty pseudo-class targets elements that have no children (not even a space).
The pseudo-class can be used in the following way: http://jsfiddle.net/3z1pnv71/.
HTML:
<label></label>
<label>
<input type="checkbox" />
Yes
</label>
CSS:
label:empty:before {
content: "Valid?";
font-weight: bold;
}
EDIT: It's also possible to keep all the textual elements in HTML and use the following approach, if it is suitable: http://jsfiddle.net/cqugufex/.
HTML:
<label data-text = "Valid?"></label>
<label>
<input type="checkbox" />
Yes
</label>
CSS:
label:empty:before {
content: attr(data-text);
font-weight: bold;
}
Found a few solutions to this, both of which work because the label descriptor is always the first label within the parent element, and any checkboxes are subsequent labels
Solution 1: first-of-type
label:first-of-type {
font-weight: bold;
}
Solution 2: first-child
label:first-child {
font-weight: bold;
}
I still haven't found a solution that finds if a label has only a text element, but this at least works for most cases.
How do I remove italic effect of <i> tag so I can do this:
<span>
test<i>test</i>
</span>
I am filling some text in the <i> tag using jQuery innerHtml, so it comes in italic, but I don't want the italic effect.
Is there any way I can remove the italic effect using CSS?
I cant use a different tag. I can only use the <i> tag.
You just need to use this CSS code:
.no-italics {
font-style: normal;
}
HTML code:
<span>
test
<i class='no-italics'>test</i>
</span>
Use font-style:
i {
font-style: normal;
}
You can do any formatting with CSS.
Like:
b {
font-weight: normal;
}
will change bold text to normal.
Similarly,
i {
font-style: normal;
}
will make <i> font style as normal (non-italic).
You can use the CSS style font-style: normal to get that effect. Then you can do your jQuery to put text in the tag:
$('i#replace').html('this text isn\'t italicized either . . . ');
i {
font-style: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span>text text <i id="replace">this is NOT italic</i> text text</span>
Use font-style to reset the italic style when the class is used.
i.no-italics {
font-style: normal;
}
<i class="no-italics">Olmstead v. L.C. and E.W</i>
I've tried this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
font-color: red;
font-weight: bold;
}
and this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
color: red;
font-weight: bold;
}
but I still end up with a gray font on my H3 text.
Why?
Either you have another color set for the id #ambrosia and that is taking precedence over the generic selector, or you have another tag inside the h3 which has a color assigned to it.
Or, in your html you have the #ambrosia applied to the h3 tag, but in your css, you have specified an h3 element which is inside an #ambrosia element. If you are wanting to use <h3 id="ambrosia">, your css should be
h3#ambrosia { color: red; }
You likely have other CSS that has a more specific selector that's giving your <h3> that font color, identifying that selector and/or posting your markup would help us provide a more specific selector that would override the font color.
You should use Chrome's "Inspect Element" option.
Right click on the line and choose Inspect Element and it will show you the path of the CSS evolution of your element.
the color: red; syntax is correct. however it is possible that you have some other styles in your css file that are conflicting.
you might try using the "firebug" firefox plugin. it will allow you to select the element and see exactly which style is applied to the element and if your class is being overridden