What is the difference checked and default pseudo-class cause they look similar? I'm confused. Please someone explain between two property diff.
* {
border: none;
}
:checked {
outline: 3px solid orange;
}
:default {
outline: 3px solid blue;
}
<input type="checkbox" checked/>
<!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->
:default is not necessary to use. It defines a default value. :checked only applies when the element is checked. The issue is, that you use :default last which also overwrites the previous :checked selector. If you swap them, it will work:
* {
border: none;
}
:default {
outline: 3px solid blue;
}
:checked {
outline: 3px solid orange;
}
<input type="checkbox" checked/>
<!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->
Related
I have a problem in selecting the particular input file element in html using selector.
How to style the particular input type element without affect the others
You can style a particular type of input element in below was
1) Apply a class or id to the input element and write styles for that class or id
HTML
<input class="custom-file" type="file"/>
CSS:
.custom-file {
border: 1px solid red;
}
2)Or You can target the input type itself in genral like the below snippet.
HTML
<input type="file"/>
CSS:
input[type="file"] {
border: 1px solid red;
}
This will apply the css only for the input type file, and not for other input types such as text etc. This will add border red to all the input tags in the page with type file.
3) Or if more than one input file is present try targetting using the nth-child selector in css
**HTML**
<input class="custom-file" type="file"/>
<input class="custom-file" type="file"/>
<input class="custom-file" type="file"/>
**CSS:**
input[type="file"]:nth-child(2) {
border: 1px solid red;
}
This will add border only to the second instance of the input type file.
The following code turns the button text a dark color when the button is selected. I assume this comes from code embedded in Bootstrap's btn class. How can I override the code to stop the text from changing color after the button is selected?
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.buttonColor{
color:#ff0000;
}
.buttonColor:hover{
color:#ffff00;
}
</style>
</head>
<body>
<button class="buttonColor btn" > Submit</button>
</body>
</html>
This is a common question: How to overwrite styling in Twitter Bootstrap, best way to override bootstrap css, the list goes on.
Read up on the CSS law of specifity. Essentially, if you're more specific in your class declaration, you can override others that are targeting the same elements:
In your example:
button.buttonColor.btn {
color: red;
padding: 50px;
}
Will override BootStrap's button.btn declaration.
Similarly, add pseudo selectors to override other states:
button.buttonColor.btn:active, button.buttonColor.btn:hover, etc
Assuming that by "selected" you mean the active state of a button, this is how you achieve it:
.buttonColor:active {
color: #ffff00;
}
Bootstrap uses both the :hover,:active and :focus pseudo-classes to target specific element states:
/* Example of Bootstrap :active styles for buttons */
.btn.active, .btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
along with :
/* Example of Bootstrap :focus and :hover styles for buttons */
.btn.focus, .btn:focus, .btn:hover {
color: #333;
text-decoration: none;
}
So you'll just need to explicitly override them using your own style :
/* The more specific your selector (e.g. the more accurately it describes an */
/* element, the more likely a style will be applied. */
.btn.buttonColor:active,
.btn.buttonColor.active,
.btn.buttonColor:hover,
.btn.buttonColor:focus {
color: #ffff00!important;
}
or if you want to be more specific, you could explicitly target <button> elements exclusively :
button.btn.buttonColor:active,
button.btn.buttonColor.active,
button.btn.buttonColor:hover,
button.btn.buttonColor:focus {
color: #ffff00!important;
}
I've stumbled across some odd behavior in IE 10 and 11. The adjacent sibling CSS combinator works. (+) The :valid and :invalid pseudo classes work. But when you put them together, they get weird.
Take this html
<input required>
<p class="message">message</p>
styled with this css
input:valid { border: solid green 1px; }
input:invalid { border: solid red 1px; }
input:valid + .message { background-color: green; }
input:invalid + .message { background-color: red; }
When there is no text in the input, it correctly has a red border. The color of the following message should always match. However, you have to perform a page zoom to get the colors to synchronize. Note that merely resizing the viewport is not enough. Is this a bug? Is there a workaround?
Here's a demo.
As BoltClock said in its comment, it's a repaint bug.
You can force a repainting by toggling the display css to none and back to block in the .message element.
Example:
$('input').keyup(function () {
$(this).siblings('.message').css('display','none').css('display', '');
});
<form class="fin-search-input" method="post" action="../FinServlet">
<li><BR><input type="text" name="ticker" placeholder="Ticker*"></li>
<li><input type="text" name="fromDate" placeholder="From" id="fromDate"></li>
<li><input type="text" name="toDate" placeholder="To" id="toDate"></li>
<li><input type="submit" value="search" class="submitButton"></li>
</form>
How can I select all input elements except last?
This is what I tried :
.fin-search-input input:not(:last-of-type){
height:13px !important;
width:90%;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow:inset 2px 2px 2px #888;
box-shadow:inset 2px 2px 2px #888;
}
This css is not applied to any input element.
Your selector seems to be wrong, in the case of your posted HTML every input is the :last-of-type within its parent element. You need to select the input contained within the :last-of-type li element instead (I assume):
.fin-search-input li:not(:last-of-type) input {
/* css */
}
JS Fiddle demo.
Did you try this?
.fclass input:not(:last-of-type) { color:red }
Actually, your current code works.
:last-child can be used this way with :not
FIDDLE
:last-child selector should work. I have checked it. Use last-of-type instead. The :last-of-type selector matches every element that is the last child, of a particular type, of its parent.
Check this FIDDLE
Is it possible to have the background-color of a form's fieldset change when the cursor is inside any of that fieldset's text fields?
I assumed this might work, but it doesn't:
fieldset {background: #ffe;}
input[type=text]:focus+fieldset {background: #ff0;}
You can't style a fieldset based on the focus state of one of its children inputs.
However, you can simulate the effect by adding an empty div as the last child of the fieldset, and styling it. This div's styles can then be changed using the general sibling selector on the focused input:
fieldset {
border: none;
position: relative;
margin-bottom: 0.5em;
}
legend {
position: relative;
background: white;
}
input:focus {
background: lightyellow;
}
input:focus ~ div {
border: 2px solid black;
background: #def;
}
fieldset > div {
height: calc(100% - 0.5em);
width: 100%;
position: absolute;
top: 0.5em;
left: 0;
border: 2px solid lightgray;
z-index: -1;
}
<fieldset>
<legend>Fieldset 1</legend>
<input name="text1" type="text" />
<input name="text2" type="text" />
<div></div>
</fieldset>
<fieldset>
<legend>Fieldset 2</legend>
<input name="text3" type="text" />
<input name="text4" type="text" />
<div></div>
</fieldset>
This is now possible with :focus-within
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN
fieldset {
background: green;
margin: 1em;
}
fieldset:focus-within {
background: red;
}
<fieldset>
<input>
</fieldset>
I’m afraid it’s not possible with CSS, since CSS doesn't have a selector that would select on the basis of an element’s children. The selector input[type=text]:focus+fieldset in your attempt matches a fieldset element that immediately follows a focused text input box—something quite different from what you want.
It is however possible and fairly easy do deal with this using JavaScript. You would just need onfocus and onblur event handlers on the fields inside the fieldset, and these handlers could be the same functions for all of them; they would just change the style.background property of the fieldset element,
If you are not using the fieldset for accessibility reasons, then just do something like this:
http://www.pmob.co.uk/temp/categorybox.htm
If you need it for both borders AND accessibility, consider wrapping the fieldset in a div and then styling that containing div instead of the fieldset.
Hope this helps!
Matt
If you are using Jquery, and you are not nesting your fieldsets, you can do a simple bind which attaches itself to all your page controls within a fieldsets, and whenever you focus/unfocus on any of these controls, a class is added/removed from the fieldset containing the control.
Here's a sample:
$('input, label, select, option, button', 'fieldset').each(function (index, item) {
$(this).focus(function () { $(this).closest('fieldset').addClass('fieldsetFocus'); });
$(this).blur(function () { $(this).closest('fieldset').removeClass('fieldsetFocus'); });
});