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/
Related
I'm using the following in some selenium code:
WaitForElement(By.CssSelector("#document-count:contains(<number greater than 0>)"));
Specifying the number greater than 0 is where I'm stuck. Is there any way to use only css to check and see if an element's innertext has something other than 0?
:contains was deprecated in CSS3. Since WebDriver ties directly into the browser, it's unable to use that pseudo-class.
Is there any way to use only css to check and see if an element's innertext has something other than 0?
Unfortunately not. CSS really screwed Selenium users over with their deprecation of both :contains and :nth
As Arran said, you can use xpath, or - if you are willing to experiment with C# and CSS together (not just css as you state) then you can come up with something to loop x amount of times checking the text.
Per Chris Coyier at CSS Tricks:
Deprecated
:contains() - As far as I know, this is gone. The current
CSS3 spec has removed it. I don't know the story, let me know if you
do. At a glance, it looks ridiculously useful (being able to select
objects based on the textual content they contain). It may be because
of problems, or having content in selectors being undesirable. My
preference would be to have it select by elements rather than text,
like p:contains(img), but alas, no such luck.
That said, if you were to set the value properties, you may be able to use :not([value="0"]):
See jsFiddle demo
HTML
<div id="doc">
<input type="text" value="0" />
<br />
<input type="text" value="1" />
<br />
<input type="text" value="2" />
</div>
CSS
#doc input[value="0"]
{
background: red;
}
#doc input:not([value="0"])
{
background: green;
}
Result
I cannot get this work, looks like not possible, that's why i'm asking...
This is the CSS used:
label.btn {
cursor:pointer;
display:inline-block;
}
label.btn>input[type=checkbox] {
display:none;
}
label.btn>input[type=checkbox]:checked~b {
background:red;
}
/* not relevant, just for testing purpose */
#divtest {
margin-top:1500px
}
Following HTML code will check the input, and then style for <b> tag is applied:
<a href="#divtest" id="anchor">
<label class="btn">
<input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
</label>
</a>
DEMO styling
If i add attribute 'for' to the label to target the anchor tag, the default browser scrolling works, but then no more styling applied:
<label class="btn" for="anchor">
DEMO anchor
Now, the obvious question:
Can i get these both behaviours working together in pure CSS?
An input element inside an a violates common sense as well as HTML5 CR. Nesting two interactive elements raises the issue which element is activated on mouse click.
Instead of such construct, use valid and sensible HTML markup. Then please formulate the styling question in terms of desired or expected rendering vs. actual rendering, instead of saying that “this” “does not work”.
This won't work since the Input:checkbox is INSIDE the <label>. Browsers will set focus on the input upon a click on the label.
I want to use the white-space CSS property in an HTML textarea.
Basically if someone types a bunch of text with line breaks in a textarea, and then submits this data to be stored in MySQL, I want to use the white-space CSS property to display those line breaks in the textarea. But when I try it it's not working and just displays the text all together in one big paragraph, without any breaks or anything. Is there a way to do this?
<form action="includes/changebio.php" method="post" id="form1">
<textarea id="bio" style="width: 440px;
margin-top:3px;
text-align:left;
margin-left:-2px;
height: 120px;
resize: none;
outline:none;
overflow:scroll;
**white-space:pre-line;**
border: #ccc 1px solid;" textarea name="bio" data-id="bio" maxlength="710" placeholder="<?php echo stripslashes($profile['bio']); ?>"></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>
textarea{white-space:pre}
When I've seen this, it's because your textarea is inheriting a white-space:nowrap from something. It can also be complicated by a wrap="no" on the textareas which can be useful sometimes.
The default behavior for a textarea nowrap is pre, so simply setting the css as above at the bottom of your styles will override anywhere that is setting the white-space.
If you inspect your textarea element, you'll most certainly find that somewhere in the hierarchy you're setting the nowrap property somewhere on some type of element that is overriding the default textarea behavior.
Don't.
<textarea> elements already handle whitespace literally. There is no need to try and take things into your own hands.
Things seem to be working ok for me... Tossed this into a codepen just to test it. Newline characters appear fine within the textarea when added directly.
Don't know what's going on. Is PHP stripping newline characters? Are you using double quotes around whatever you are passing in through $profile['bio']?
Here's an answer that might help you: The .val() of a textarea doesn't take new lines into account
The last response, in particular. Based on your code, it doesn't sound like the .replace() method is what you need (but I could be wrong... maybe I'm not understanding what you are doing).
one line of jquery will solve the problem
$('#bio').text('');
or Javascript
document.getElementById("bio").innerText = '';
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 have a simple form in a ASPX page that have a lot of <label> and <asp:TextBox> pairing that construct the outlay of the form.
I have a requirement to add a string behind the textbox to indicate that the field is compulsory. I'd tried adding either a <span>, a <em> or a <div> after the field but it will still display the message at the bottom of the textbox.
Any way for me to achieve this?
EDIT:
I mean right hand side of the textbox, not behind as in watermark. My Bad.
EDIT for sample code:
I'd tried all the suggestion but it is still not working, thinking whether it's my code issue or not. Below are my codes:
<label>Telephone No.</label>
<asp:TextBox ID="txtTelNo" runat="server"></asp:TextBox>
<span class="afterInput">test</span>
any pointers? Thanks.
EDIT for Answer
As it turns out the problem lies in the css property. The template that i used has all the input assigned with the display: block property, which makes anything after the <input> element to be pushed down.
After creating a custom css class with display: inline-block and assign to them appropriately, i manage to get the result that i wanted.
Many thanks for the answer provided, especially the :after attributes and the watermark attributes.
See http://jsfiddle.net/ekWG9/
.required:after{
content: "*";
color: red;
}
<label>A box</label><input type="text" value="Hello" /><span class="required"></span>
<!-- alternative HTML -->
<span class="required"><label>A box</label><input type="text" value="Hello" /></span>
Using the :after pseudo element selector allows you to take the literal content out of the markup (e.g. you don't have to repeat "*" over and over).
You can also use relative or absolute positioning to tweak the location of the content of the :after pseudo element. Example: http://jsfiddle.net/ekWG9/1/
By behind the textbox, seems you are talking of watermark text.
You could use the TextBoxWatermark from ajaxcontrol toolkit.
There are also several jQuery alternatives to implement it.
html5 also has browser support for watermarks:
<input name="q" placeholder="Go to a Website">
You could add an attribute to your control to that effect.
Use css for this purpose:
span.clsRequired {
float:left;
margin:2px 0 0 3px;
color:red;
}
And your span before text box looks like:
<span class="clsRequired ">*</span>
you should try something like this
<body>
<form id="form1">
<asp:TextBox ID="TextBox1" runat="server"/> <span>Required field</span>
</form>
</body>