I've been using Bootstrap's vue form-group in order to create input fields.
I'm trying to apply certain CSS on the 'legend' Element for the following code:
<fieldset id="__BVID__59" class="form-group" required="required">
<legend class="col-form-label pt-0">Login</legend>
<div tabindex="-1" role="group">
<input type="text" class="form-control">
<!----><!----><!---->
</div>
</fieldset>
My goal is to add required asterisks to the labels, therefore my suggestion would be:
.form-group[required] legend::after {
content: '*';
color: red;
}
but my CSS doesn't seem to recognise the legend element, no matter what I do or how I write it.
it's the same if I use label instead of legend.
I've tried also using nth-child(0) of fieldset (the parent) but it seems like it's just ignoring this child and nothing really happens. I thought it has something to do with the CSS configurations of the bootstrap i'm using, but also using !important doesn't seem to do anything.
any help would be highly appreciated.
In Vue if you use a scoped style tag <style scoped> you wont be able to select subcomponents by default. To do so you need to use a deep selector
<style scoped>
.form-group[required] ::v-deep legend::after {
content: '*';
color: red;
}
</style>
Without scoped your css should work as expected, but i don't recommend doing so as it can mess with other components and be messy to debug.
<style>
.form-group[required] legend::after {
content: '*';
color: red;
}
</style>
Related
If I have a selector defined for input:show_invalid
<style>
input:show_invalid {
background-color: red;
}
</style>
When I reference it in this HTML, the input does not show as red:
<html>
<input type='text' class='input:show_invalid'/>
</html>
In the CSS code, classes are marked by a ., not a : at the beginning. In the HTML code, you just write the class name into the class atrribute - without the dot or anything else.
so your code has to be
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
There's a few things wrong with your code.
You're using a non-existing pseudo-class, show_invalid. You probably meant to use the invalid pseudo-class.
You are targeting all <input> elements (not a class) with a pseudo-class show_invalid with your CSS selector but adding the entire string input:show_invalid as a class in your html.
You either wanted to use the invalid pseudo-class:
input:invalid {
background-color: red;
}
<input type='email'/>
or to target a class:
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
Try
<input type='text' class='show_invalid'/>
You're already in an element
A class selector should precede with a period eg. specify a simple class show and access the css as
.show {
background-color: red;
}
OR
if you want the styling to be same, then replace the class name to
class='show_invalid'
Hope it helps
I'm trying to come up with some good default styling for <input>s in HTML5 and tried the following:
input::after { display: inline; }
input:valid::after { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }
Alas, the ::after content never shows up. It's not a problem with double- versus single colons for the pseudo-elements; I've tried both. It's also not a problem with having a pseudo-element and a pseudo-class; I've tried it without the :valid and :invalid. I get the same behavior in Chrome, Safari, and Firefox (Firefox doesn't have the :valid and :invalid pseudo-classes, but I tried it without those.)
The pseudo-elements work fine on <div>, <span>, <p>, and <q> elements -- some of which are block elements and some are inline.
So, my question is: why do browsers agree that <input>s don't have an ::after? I can't find anything in the spec that would indicate this.
As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.
You can put a span before or after the element. E.g.:
<style>
#firstName:invalid+span:before {
content: "** Not OK **";
color: red;
}
#firstName:valid+span:before {
content: "** OK **";
color: green;
}
</style>
<input type="text"
name="firstName"
id="firstName"
placeholder="John"
required="required"
title="Please enter your first name (e.g. John )"
/><span> </span>
Webkit lets you do ::after on input elements. If you want a way to make it work in Firefox you could try using ::after on the input's label rather than the input itself.
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"> This is not done.</p>
CSS
p.note1:before{
content: "Note:";
}
tb1.note:before{
content: "Enter your number";
}
I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.
EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.
EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"
:before creates a pseudo-element that is the first child of the element matched.
The selected element MUST be a container tag. An empty tag like <input> doesn't have any children element.
If you can't edit your HTML code manually, you're still able to that by using JavaScript:
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
Update
If you want to achieve this by using CSS only, you need to have a container element wrapping your <input> (or come after it).
BUT It doesn't work correctly as placeholder do. You'll not able to check the value of <input> by CSS. If you write something inside the <input>, after blur event, the generated placeholder will be displayed over the <input> again.
HTML:
<label>
<input id="tb1" type="text" class="note">
</label>
CSS:
label {
position: relative;
}
label:after {
content: 'Enter your number';
position: absolute;
left: 5px;
top: 0;
color: #bbb;
}
#tb1 {
position: relative;
}
#tb1:focus {
z-index: 10;
}
JSBin Demo
It doesn't work for the simple fact that this:
<input id="tb1" type="text" class="note"></input>
is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4
If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
I have found this method but not supported by all browsers:
#tb1.note:empty:before{
content: "Enter your number";
}
Note: you have forgot to place an id selector # tb1.note
see this link
EDIT:
Try this for starters: (Note: you'll need some js to detect if text has been entered in the input)
Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.
FIDDLE
Markup
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
css
.container
{
position: relative;
}
input
{
background: transparent;
}
input:focus + .fakePlaceholder
{
display: none;
}
.fakePlaceholder
{
color:gray;
position:absolute;
top: 3px;
left: 5px;
z-index: -1;
}
You can't use pseudo elements on an input tag - or any other non-container elements for that matter
From the Pseudo-Elements tag info:
you cannot use them (pseudo elements) with replaced elements (see
below) which do not have actual content. This is because the generated
content resides within the element.
...
Replaced Elements
Any element whose appearance and/or dimensions are determined by some
external resource is considered to be a replaced element. Some
pseudo-elements cannot be applied to replaced elements because they
have no "content" or get replaced with something (such as user
interface controls). Replaced elements include images (<img>), inline
frames (<iframe>), line breaks (<br>), horizontal rules (<hr>),
plugins (<object>), form elements (<button>, <textarea>, <input>, and
<select>), videos (<video>), audio sounds (<audio>), and canvases
(<canvas>). Any other element is considered to be a non-replaced
element.
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
Your HTML would look like this:
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */
a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */
a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */
a#Trickory input {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
a#Trickory label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
http://jsfiddle.net/childerskc/M6R7K/
CSS: Is it possible to specify a style to a fieldset before another fieldset? When Two fieldset follow in my code I would like to apply them a specific style.
EDIT Without using class and id of course...
Here is my code
<div id="tabs">
<fieldset class="one">
<legend>One</legend>
Text
</fieldset>
<fieldset class="two">
<legend>Two</legend>
Text
</fieldset>
</div>
Ths give me this :
And I would like this :
With CSS you can apply styles only to child of any element or siblings of it, that's why we can apply style only on second fieldset using + Adjacent sibling selector. In following demo i will show how to do it.
About all possible CSS2 selector you can read in specification to make yourself understand: what you can made with css selector and what not
May be my explanation demo on dabblet.com can help you to solve your problem.
The result:
HTML markup:
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
CSS markup:
/* detect only first fieldset */
fieldset:first-child {
background-color: green;
}
/* detect all sibling fieldset element after first one */
fieldset:first-child ~ fieldset {
background-color: gray;
}
/* detect only first sibling fieldset element after first one */
fieldset:first-child + fieldset {
background-color: red;
}
Without using any classes or id's you can use first-child to target the first one and then use the default styling for second.
e.g.
form fieldset{ background: green; }
form fieldset:first-child{ background: red; }
First fieldset will have a red background, any others will have a green background. Note though this is for fieldsets within the same form. If they are in separate forms, then you can apply the same principle using the form:first-child
Why not assign each one a specific class or ID?
<fieldset class="firstset"></fieldset>
<fieldset class="secondset"></fieldset>
If you want to avoid using ID or class names , then go for the first-child property.
For eg -
form fieldset:first-child{
//your css code here
}
If you don't want to use classes or id's but still want them to have different styles, how about using inline CSS for each fieldset?
Is there a particularly good reason to avoid classes and id's while still wanting to use CSS? With a little more detail, we can probably give you a better answer.
I have the following
<div class="comment-wrap">
<textarea></textarea>
</div>
Whenever the textarea is in focus, I want to style the comment-wrap div. I've tried:
#hallPost-inner + textarea:focus {
background: red;
}
This does not work. Any ideas on how I can style the comment-wrap div whenever the textarea is in focus, meaning the cursor is blinking in the textarea and the user can type?
Thanks
Not sure what #hallPost-inner is, but in general CSS selectors cannot ascend, meaning you would need to have the textarea:focus selector, but then would need to style an ancestor element, which cannot be done in css. Here's a good resource, among many others. The link shows how an easy javascript solution can be achieved as well.
With JavaScript and jQuery, you could do:
$("textarea").live("focus", function(e) {
$(this).closest(".comment-wrap").css({
"background": "red"
});
});
Use the pseudo selector :focus-within. Note that any child in focus will effect the parent. If you have more children and just wanna apply when the event hits the <textarea>, you will need JS.
Link for more details. (css-tricks)
Ex.:
form{
padding: 20px;
background-color: gainsboro
}
input{
text-align: center
}
form:focus-within {
background-color: yellow
}
<form>
<input type="text" placeholder="name">
<input type="text" placeholder="lastname">
<input type="button" value="Go!">
</form>
Note: not all browsers support :focus-within