I have HTML page where I have many labels added with (s) like Cat(s), Dog(s), Page(s), etc and I have CSS property for them as
<html>
<head>
<style>
label{
text-transform: capitalize;
}
</style>
</head>
<body>
<label>Cat(s) : 5</label>
<label>Dog(s) : 4</label>
</body>
</html>
it is working fine on most of the browsers but some like chrome are showing (s) as capital (S), but it should not be.
Check https://codepen.io/vikramtalkin/pen/ZdeQmW on chrome and firefox, on firefox it shows properly but on chrome it shows (S)
Please suggest possible solutions.
The simplest that comes to mind, using CSS and with the existing markup, is to use :first-letter.
With :first-letter it will only capitalize the first letter in label's, and leave the s in (s) be.
Do note, the label need to be displayed block or inline-block
Stack snippet
label {
display: inline-block;
}
label::first-letter {
text-transform: capitalize;
}
<label>Cat(s) : 5</label>
<label>Dog(s) : 4</label>
<label>cow(s) : 5</label>
<label>horse(s) : 4</label>
Edit
Based on a comment, where there might be more than just one word.
In a sentence like "i have dog(s)" one can't capitalized arbitrary words, e.g. "I" and "Dog" but not "have". For that you need a script.
If to capitalize all words, you can't use :first-letter, and if so, you need to wrap the text that should be capitalized, in e.g. a <span>, to avoid the "s" in "(s)" to be affected (how Chrome does).
And note, it works the same way in Opera and Edge, as it does in Chrome, and likely in Safari as well, given it also use WebKit, so I guess it is only in FireFox the "(s)" isn't affected.
Related
Odd issue with text-transform: capitalize and back-to-back span's in IE 11. It will not capitalize the first word without separating the spans with whitespace or whitespace before the span content. Any ideas?
<html>
<style>
.upper { text-transform:capitalize; }
</style>
<body>
<span>Broken:</span><span class="upper">john doe</span>
<br>
<span>Working:</span><span class="upper"> john doe</span>
<br>
<span>Working:</span>
<span class="upper">john doe</span>
</body>
</html>
Example: https://jsfiddle.net/57n67xpx/1/
For now I can wrap my spans in whitespace. A bug nonetheless...
This is a known interop issue. Implementations disagree on how text-transform: capitalize should behave with respect to punctuation. WebKit is notably the only one to capitalize a letter that immediately follows a punctuation mark without a space in between — everyone else behaves the same as IE. So it would seem that Safari and Chrome are the odd ones out, not IE.
If you absolutely require that a letter following a punctuation mark inline with no intermediate whitespace be capitalized, your best bet is making that element an inline-block. This causes the text in the element to become a separate run of text from the previous element, making the first letter of that element truly be its first letter for the purposes of text-transform: capitalize, but this will be a problem if your text can potentially wrap due to length.
Just a quick question - I was unable to find this when I searched, but I'm sorry if it's a repeat.
I have paragraph tags enclosing the title of my website:
<div class = "title">
<p>Welcome to homepage!</p>
</div>
<div class = "subtext">
<p> Subtext goes here </p>
</div>
<div class = "formthing">
<form method = "GET" action = "/form">
<input type = "submit" name = "submitted" class = "btn-large" value = "Click button" />
</form>
</div>
and everything is working fine. However, when I zoom in on the page, the words of the title overlap themselves. Is there anything I can add to CSS to prevent this from happening?
i dont see any overlap in your code, but a quick fix would be to can add margins to your classes via css to prevent overlaping.
eg:
<style>
.formthing {
margin: 0.25em;
}
</style>
You need to use em font-sizing in your CSS. If you don't know what this is, this is a really good article on it: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Essentially em is just another way of expressing a percentage but some browsers falter at higher and lower levels of zoom when using pt, px and % values. Using em mitigates this issue the best.
font-size: 16px;
font-size: 100%;
font-size: 1em;
Most modern browsers will default to 16px font-size as the control and adjust off of that, making the above 3 font-sizes equal to each other (give or take some decimals in Firefox and IE). This isn't fool-proof but for the most part will get you through these situations. It's a very widely practiced and proven method of preventing unexpected text and element overlapping.
Also - might wanna look into the font you're using and whether there is any kerning applied and maybe utilize letter-spacing: 1px; and adjust accordingly.
Don't forget to use a CSS reset like Normalize.css.
I have a form with a list of dates on it and I'm using the HTML 5 input type="date" element to represent them. I'd like to change the colour of the fields that don't have a value (i.e. those that show dd/mm/yyyy) so that they're more easily distinguishable from the fields that contain an actual date.
Is this possible? I thought that -webkit-input-placeholder might have done what I want, but it seems not.
There is no placeholder in a date input in Chrome. If you check "Show shadow DOM" in devtools' settings, you will be able to inspect it:
<input type="date">
#document-fragment
<div dir="ltr" pseudo="-webkit-date-and-time-container">
<div pseudo="-webkit-datetime-edit">
<span aria-help="Day" aria-valuemax="31" aria-valuemin="1" pseudo="-webkit-datetime-edit-day-field" role="spinbutton">dd</span>
<div pseudo="-webkit-datetime-edit-text">/</div>
<span aria-help="Month" aria-valuemax="12" aria-valuemin="1" pseudo="-webkit-datetime-edit-month-field" role="spinbutton">mm</span>
<div pseudo="-webkit-datetime-edit-text">/</div>
<span aria-help="Year" aria-valuemax="275760" aria-valuemin="1" pseudo="-webkit-datetime-edit-year-field" role="spinbutton">yyyy</span></div>
<div></div>
<div pseudo="-webkit-calendar-picker-indicator"></div>
</div>
</input>
You can style separate elements using their pseudos (works in Chrome Canary):
::-webkit-datetime-edit-year-field {
font-weight: bold;
}
Thanks to the existing answers I managed to work it out.The day month and year fields only get an aria-valuetext attribute when the date field has a value. This means that I can style these values when the date field's showing its default value like this:
::-webkit-datetime-edit-day-field:not([aria-valuetext]),
::-webkit-datetime-edit-month-field:not([aria-valuetext]),
::-webkit-datetime-edit-year-field:not([aria-valuetext])
{
color: #999;
}
As of Chrome 31 (possibly earlier), aria-valuetext is 'blank' rather than null. Either of the following work
::-webkit-datetime-edit-year-field[aria-valuetext=blank]
::-webkit-datetime-edit-year-field:not([aria-valuenow])
rather than:
::-webkit-datetime-edit-year-field:not([aria-valuetext])
(I Don't have the rep to comment on the relevant answer)
Edit: This does not work anymore
I wanted the "placeholder" text to be gray. Based on #JackBradford's answer, I'm using:
::-webkit-datetime-edit-text, /* this makes the slashes in dd/mm/yyyy grey */
::-webkit-datetime-edit-day-field[aria-valuetext=blank],
::-webkit-datetime-edit-month-field[aria-valuetext=blank],
::-webkit-datetime-edit-year-field[aria-valuetext=blank] {
color: lightgrey;
}
The placeholder-attribute is currently not supported by input fields with type="date" and therefor can't be styled. Take a look at this list of valid attributes:
w3.org: "input type=date – date input control"
So Chrome is actually doing it right in contrary to Safari, which doesn't care about the date-type at all.
As mentioned in a couple of the comments, none of these solutions seem to be working in more recent versions of Chrome and I can verify this is still the case as of v94. As Eli mentions it seems to be problematic when attempting to select the attribute of a pseudo-element.
If you don't mind using a little bit of JavaScript to set an attribute on the <input type="date" /> element then it is possible to come up with a hacky CSS selector as a workaround.
For example, I'm using JavaScript to set a data-hasvalue attribute once the input has a value, and then using the following SCSS.
&[type="date"]:not([data-hasvalue]):not(:invalid):not(:focus) {
&::-webkit-datetime-edit-text,
&::-webkit-datetime-edit-day-field,
&::-webkit-datetime-edit-month-field,
&::-webkit-datetime-edit-year-field {
color: rgb(117, 117, 117); // Chrome's default color for input placeholder text
}
}
Be sure that the data-hasvalue attribute is set for all date inputs, otherwise you will get placeholder style text when a value is set. Alternatively, opt in to the behaviour by doing the opposite and targeting only when a value is not set.
I know that I can add a degree symbol in HTML with "°", and I am looking at examples of CSS using :after selector and the content property, but I'm having trouble putting it all together.
I want a degree symbol to show up after the text that appears in an input box.
<div class="threshold">
<input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>
And the CSS:
.threshold input:after {
content: "°"
}
But that doesn't seem to work. Any ideas on how to fix it. I could store the degree symbol in the value, but that would require a lot of extra javascript for things like validation and whatnot. Any way to do it with CSS?
Try something like this
HTML
<div class="threshold">
<input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>
CSS
.threshold:before {
content: "\00b0"
}
DEMO: http://jsfiddle.net/Tt2hU/ OR http://jsfiddle.net/Tt2hU/1/
This might help: Can I use the :after pseudo-element on an input field?
It seems it may not be possible in CSS with an input tag.
should work like this
degrees° is done simply by
<p>degrees°</p>
You have to put in an escaped reference to the hexadecimal Unicode character value (from here)
::after {
content: "\00b0";
}
DEMO
HTML entities doesn't work in CSS, you would use a character code entity, i.e. a backslash followed by a hexadecimal character code:
.threshold input:after {
content: "\00b0";
}
However, this only works on regular elements, not input elements.
Demo: http://jsfiddle.net/Guffa/AcxEG/
I am trying to access only the ELEMENT for toc-chapter number (1 in this case). The element is in nested classes. I've used this approach on toc-section and was able to produce the wanted result.
Css:
.book .toc {
& > .title{
font-size: x-large;
font-weight: bold;
padding-bottom: .25em;
margin-bottom:.50em;
border-bottom: 1px solid #tuscany;
}
& a.target-chapter{
.cnx-gentext-n{
&:before{content: "testing";}
}
color:red ;
}
}
HTML:
<div class="toc">
<div class="title">
Table of Contents
</div>
<ul>
<li xmlns:d="http://docbook.org/ns/docbook" xmlns:db=
"http://docbook.org/ns/docbook" xmlns:pmml2svg=
"https://sourceforge.net/projects/pmml2svg/" xmlns:c="http://cnx.rice.edu/cnxml"
xmlns:ext="http://cnx.org/ns/docbook+" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:mml="http://www.w3.org/1998/Math/MathML" class="toc-chapter">
<a href="#idm3792312" class="target-chapter"><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">Chapter</span> <span class=
"cnx-gentext-chapter cnx-gentext-n">1</span><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">.</span> <span class=
"cnx-gentext-chapter cnx-gentext-t">Aging and the Elderly</span></a>
Based on your provided info, I would assume that LESS is producing the following css selector (I have not actually recoded your problem in LESS, this is just my interpretation):
.book .toc a.target-chapter .cnx-gentext-n:before {content: "testing";}
Which should work based on this fiddle. I will assume you are testing in a browser that supports :before (not some old version of IE). So to trouble shoot this, you need to:
Verify that such a selector is in fact being produced.
If NOT, determine what selector string is in fact being produced by your code (if any), and that may lead you to solving your issue.
If such a correct selector string is being produced, then you need to look at other css (which you have not posted, so I am merely speculating here):
Is some more specific (which seems unlikely) selector string targeting the same thing and overriding it?
Do you elsewhere set the display or color or visibility or some other property on that :before pseudo-element that in fact "hides" the added "testing" from view?
Is your actual use case putting an image as content and are you seeing it not show up in printing (that would be a whole different issue)?
Basically, if your selector string is coming out correct, there are numerous other things that could be happening, and we would need more details to resolve it. If it is not coming out as above, then I would be interested in know what it is producing.