I've created CSS for a LineEdit.
LineEdit.cpp
void MyLineEdit::initStyleSheet()
{
QString css = Css::instance().css( m_element );
setProperty( "style", "normal" );
setStyleSheet( css );
}
I have a separate .css file for style:
MyLineEdit.css
....
MyLineEdit[style="Normal"]:focus
{
border: 1px solid red;
}
MyLineEdit[style="Normal"]:disabled
{
border: 1px solid gray;
background: gray;
}
Now there is one weird requirement: MyLineEdit should have a method called setNoFrame, in this function we set one more property for it, and this property is valid for only state disabled.
This is what I did:
MyLineEdit::setNoFrame()
{
setProperty("noFrame","true");
initSyleSheet();
}
And this is my updated .css data
....
MyLineEdit[style="Normal"]:focus
{
border: 1px solid red;
}
MyLineEdit[style="Normal"]:disabled
{
border: 1px solid gray;
background: gray;
}
MyLineEdit[style="Normal", noFrame="true"]:disabled
{
border: none;
background: gray;
}
It doesn't work as I expected, the border is still there for state disabled and noFrame = true. Do I have mistake in combining properties for CSS above?
You're really, really close. Try
MyLineEdit[style="Normal"][noFrame="true"]:disabled
{
border: none;
background: gray;
}
From the CSS2 docs (which Qt StyleSheets supports):
Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.
Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
I'm just now becoming familiar with the noUiSlider and I googled to find examples of what exists out there with different ways to use it. Unfortunately most were adding custom images instead of adding text.
Does anyone know where or have some examples of how to design the handle in a unique way using the css or js files?
All handle styling is on the class .noUi-handle. The 'carving' on the handle is done using the :before and :after pseudo elements. You could use these elements and their content property to display text.
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF;
}
.noUi-handle:after {
content: "Some words here"; /* Add something like this */
}
If the handle text has to be updated with the slider value, you could set the value as an attribute on the slider as such:
slider.noUiSlider.on('update', function(values, handle) {
this.target.setAttribute('data-value' + handle, values[handle]);
});
And then style the handle using that attribute:
[data-value0="5"] .noUi-handle:after {
content: "Text only for value 5";
}
Is there any way, of having a if like syntax, where I can check (for an example) there are more than input[type="text"]
Something like:
.my-element >= 1 {
border: 1px solid red; // Each .my-element will have a red border
}
.my-lement == 1 {
border: 1px solid green; // The only .my-element will have a green border
}
In javascript I would do something like:
if ($('input[type="text"]').length >= 1)
I mentioned LESS in the title, because I'm writing my css code in a LESS syntax
You can, in some cases, approximate this (albeit it requires an up-to-date browser, compliant with CSS3):
input {
border-color: #f00;
}
input:only-of-type {
border-color: #0f0;
}
JS Fiddle demo.
The above works on the assumption that you're trying to style an input element which is the only input element (or 'element of that type') as a child of its parent (it has no siblings of the same input element-type).
If, however, you're trying to style an element differently according to whether it has any sibling elements, you can use:
input {
border-color: #f00;
}
input:only-child {
border-color: #0f0;
}
JS Fiddle demo.
References:
:only-of-type (Mozilla Developer Network).
:only-of-type (W3C.org).
NO, in CSS there is no if else . Use JavaScript for changing your css dynamically.
the if statement is not present in LESS as well. But this language supports guard expression which may help in mimicking some if statements.
Check this tutorial
Is there a way to detect whether or not an input has text in it via CSS? I've tried using the :empty pseudo-class, and I've tried using [value=""], neither of which worked. I can't seem to find a single solution to this.
I imagine this must be possible, considering we have pseudo-classes for :checked, and :indeterminate, both of which are kind of similar thing.
Please note: I'm doing this for a "Stylish" style, which can't utilize JavaScript.
Also note, that Stylish is used, client-side, on pages that the user does not control.
You can use the :placeholder-shown pseudo class. Technically a placeholder is required, but you can use a space instead.
input:not(:placeholder-shown) {
border-color: green;
}
input:placeholder-shown {
border-color: red;
}
<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />
It is possible, with the usual CSS caveats and if the HTML code can be modified. If you add the required attribute to the element, then the element will match :invalid or :valid according to whether the value of the control is empty or not. If the element has no value attribute (or it has value=""), the value of the control is initially empty and becomes nonempty when any character (even a space) is entered.
Example:
<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
The pseudo-classed :valid and :invalid are defined in Working Draft level CSS documents only, but support is rather widespread in browsers, except that in IE, it came with IE 10.
If you would like to make “empty” include values that consist of spaces only, you can add the attribute pattern=.*\S.*.
There is (currently) no CSS selector for detecting directly whether an input control has a nonempty value, so we need to do it indirectly, as described above.
Generally, CSS selectors refer to markup or, in some cases, to element properties as set with scripting (client-side JavaScript), rather than user actions. For example, :empty matches element with empty content in markup; all input elements are unavoidably empty in this sense. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value. And :checked and :indeterminate are similar things. They are not affected by actual user input.
Stylish cannot do this because CSS cannot do this. CSS has no (pseudo) selectors for <input> value(s). See:
The W3C selector spec
The Mozilla/Firefox supported selectors
Cross-browser, CSS3 support table
The :empty selector refers only to child nodes, not input values.
[value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).
Unless you care only about the initial state, you must use a userscript or Greasemonkey script. Fortunately this is not hard. The following script will work in Chrome, or Firefox with Greasemonkey or Scriptish installed, or in any browser that supports userscripts (i.e. most browsers, except IE).
See a demo of the limits of CSS plus the javascript solution at this jsBin page.
// ==UserScript==
// #name _Dynamically style inputs based on whether they are blank.
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #grant GM_addStyle
// ==/UserScript==
/*- The #grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var inpsToMonitor = document.querySelectorAll (
"form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1; J >= 0; --J) {
inpsToMonitor[J].addEventListener ("change", adjustStyling, false);
inpsToMonitor[J].addEventListener ("keyup", adjustStyling, false);
inpsToMonitor[J].addEventListener ("focus", adjustStyling, false);
inpsToMonitor[J].addEventListener ("blur", adjustStyling, false);
inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);
//-- Initial update. note that IE support is NOT needed.
var evt = document.createEvent ("HTMLEvents");
evt.initEvent ("change", false, true);
inpsToMonitor[J].dispatchEvent (evt);
}
function adjustStyling (zEvent) {
var inpVal = zEvent.target.value;
if (inpVal && inpVal.replace (/^\s+|\s+$/g, "") )
zEvent.target.style.background = "lime";
else
zEvent.target.style.background = "inherit";
}
Basically what everybody is looking for is:
LESS:
input:focus:required{
&:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
&:valid,
&:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}
Pure CSS:
input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
<input onkeyup="this.setAttribute('value', this.value);" />
and
input[value=""]
will work :-)
edit: http://jsfiddle.net/XwZR2/
You can take advantage of the placeholder and use:
input:not(:placeholder-shown) {
border: 1px solid red;
}
You can use the placeholder trick as written above w/o required field.
The problem with required is that when you wrote something, then deleted it - the input will now always be red as part of the HTML5 spec - then you'll need a CSS as written above to fix/override it.
You can simple do thing w/o required
<input type="text" placeholder="filter here" id="mytest" />
CSS
#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
border: black 1px solid;
color: black;
}
#mytest {
/* placeholder isn't shown - we have a value in input */
border: red 1px solid;
color: red;
}
Code pen:https://codepen.io/arlevi/pen/LBgXjZ
Using attribute placeholder and pseudo class placeholder-shown is proper way of detecting does input has text.
Example:
<input type="email" placeholder=" " required>
<label>Email</label>
input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
top : -4em
left : -0.2em
font-size : 0.9em
}
Simple css:
input[value]:not([value=""])
This code is going to apply the given css on page load if the input is filled up.
There's actually a way to do this without JavaScript.
If you set an <input>'s required selector to true, you can check if there's text in it with the CSS :valid tag.
References:
MDN Docs
CSS Tricks
input {
background: red;
}
input:valid {
background: lightgreen;
}
<input type="text" required>
You can style input[type=text] differently depending on whether or not the input has text by styling the placeholder. This is not an official standard at this point but has wide browser support, though with different prefixes:
input[type=text] {
color: red;
}
input[type=text]:-moz-placeholder {
color: green;
}
input[type=text]::-moz-placeholder {
color: green;
}
input[type=text]:-ms-input-placeholder {
color: green;
}
input[type=text]::-webkit-input-placeholder {
color: green;
}
Example: http://fiddlesalad.com/scss/input-placeholder-css
Using JS and CSS :not pseudoclass
input {
font-size: 13px;
padding: 5px;
width: 100px;
}
input[value=""] {
border: 2px solid #fa0000;
}
input:not([value=""]) {
border: 2px solid #fafa00;
}
<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />
The valid selector will do the trick.
<input type="text" class="myText" required="required" />
.myText {
//default style of input
}
.myText:valid {
//style when input has text
}
Simple Trick with jQuery and CSS Like so:
JQuery:
$('input[value=""]').addClass('empty');
$('input').keyup(function(){
if( $(this).val() == ""){
$(this).addClass("empty");
}else{
$(this).removeClass("empty");
}
});
CSS:
input.empty:valid{
box-shadow: none;
background-image: none;
border: 1px solid #000;
}
input:invalid,
input:required {
box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
border: 1px solid rgb(200,0,0);
}
input:valid{
box-shadow: none;
border: 1px solid #0f0;
}
do it on the HTML part like this:
<input type="text" name="Example" placeholder="Example" required/>
The required parameter will require it to have text in the input field in order to be valid.
Yes! you can do it with simple basic attribute with value selector.
Use attribute selector with blank value and apply properties
input[value='']
input[value=''] {
background: red;
}
It's here, .fase is a class of input in html code.
div.fase > input:focus:required:invalid {
color: red;
border-color: red;
box-shadow: 0 0 6px red;
}
div.fase input:focus:required:valid,
input:focus:required:placeholder-shown {
border-color: rgb(22, 172, 22);
box-shadow: 0 0 8px rgb(28, 150, 28);
}
div.fase input:valid {
border-color: rgb(47, 148, 49);
}
This is not possible with css. To implement this you will have to use JavaScript (e.g. $("#input").val() == "").
Is it possible to remove the IE-specific behavior CSS property via a more specific rule or the !important declaration? Example:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: /*no HTC*/
}
I realize that overriding CSS properties is undesirable, but I'm stuck here.
On Edit: I'm not sure where people are getting confused about this question. For all purposes, you can consider this already being an IE specific stylesheet. I'm asking how, if .a-rule above exists and is immutable, how can one remove the behavior via a more specific rule? A standard CSS equivalent would be:
.a-rule
{
border: 1px solid black;
}
.a-rule.more-specific
{
border: 0 none;
}
One can reset the border property for a subset of elements via a more specific rule. I'm asking how to reset the behavior property in an analogous way.
The default value is "none". See:
What is the *correct* way to unset the behavior property in CSS?
The solution:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: none;
}
.a_rule {
border: 1px solid black; /* we know border is black */
behavior: url(/some.htc) /* we know something happen inside some.htc */
}
.a_rule.more-specific {
border: 0 none; /* we remove the border */
behavior: url(/some.htc) /* we remove something inside some.htc */
}
use different .htc file
Maybe use conditional tags for IE in your head
<!--[if IE]>
<style type="text/css">
.a-rule {
behavior: url(/some.htc);
}
</style>
<![endif]-->