Say, I have an input box which has a border color which is the browser's default value or a value set by user. Now there is another element where I want to use the same property value as that of the input element. Is this possible to define in CSS? The idea is that their border colors should remain in sync with each other. It can be assumed that the elements are siblings.
You could achieve this using CSS custom properties (variables) set on a shared parent element.
:root {
--main-color: blue;
}
label {
color: var(--main-color);
}
input {
border: 1px solid var(--main-color);
}
<label>my input</label>
<input type="text" />
No, there is no such method to sync properties between two elements in css. However, you can use classes in css for this purpose. Or otherwise javascript might help.
In a comment you mention that you want the browser default, if you don't declare any additional styling on your input elements they will receive the browser input.
Otherwise, if you're chasing a specific styling of input that you've seen you can inspect the element in your browser then create your own custom class based off the values that you find upon inspection and use this class on your own input elements.
Related
Usually when I create a custom element I wrap it in a section or other appropriate HTML element and style that, but this leads the DOM looking like custom-element > section.
My question is, is it wrong to remove the section and simply treat custom-element as the root element and style that?
For example I have a custom element called tabs, right now when it's used the DOM ends up looking like tabs > div.tabs but I'd prefer to remove the div.tabs element if there's nothing wrong with that.
So my question is is it "wrong" to style my custom elements and treat them as any other HTML element, or should I continue to ignore my custom elements completely (even though it's hard to do so when you use > and other selectors)?
There is absolutely nothing wrong with styling custom elements. To reassure you, custom elements are valid HTML and unless you're supporting an older browser less than Internet Explorer 9, then you'll need to do some extra work to get the browser to recognise them.
I style custom elements all of the time, I even style Aurelia's <router-view> custom element as well.
It's better...
Don't forget that the default CSS display for a custom element is inline.
So if you want to use border, width... you should explicitly set display (to inline-block for example):
custom-element {
background: lightgreen;
width: 60px;
border: 1px solid blue;
}
.ok {
display: inline-block;
}
<custom-element>This is
<div>ugly</div>
</custom-element>
<hr>
<custom-element class="ok">That's
<div>fine</div>
</custom-element>
I have an issue with my CSS3 selection. I have a table, inside the table are input elements (text) 3 for each row. Each one in that row containing a specific data-attr. Now I have a css selection for selecting all but ones containing the data-attr labeled data-sl="inputs-calc-sub-label" and data-sl="inputs-calc-add-label" (for now) I am just trying to change the background. But here is my selection
.getLength > input:not([data-sl='inputs-calc-sub-label'])
But it applies styles to all elements. Again I want to ignore the input with that data-attr. How can I do this? What am I doing wrong? I am working on the latest version of chrome right now. Maybe the version before. Can someone help me with this? All I want to do is select all but the ones containing the data-attr.
We can't really help without seeing your corresponding html to this css, however I think the problem is with the css selector you are using.
The element>element selector is used to select elements with a specific parent.
Note: Elements that are not directly a child of the specified parent, are not selected.
therefore in your example
the .getLength must have a direct child of input
<td class="getLength"><input type="text" data-attr="normal"</td>
here's a fiddle for more help
https://jsfiddle.net/7s1nbarh/1/
.getLength:not([data-sl='inputs-calc-sub-label']) {
background-color: lightblue;
}
input {
background-color: black;
}
<input class="getLength"/>
<input class="getLength" data-sl='inputs-calc-sub-label'/>
If you want to keep the inputs the way they are, without adding in unnecessary parent elements, simply change the CSS selector to act directly upon the elements of the class, and not their children.
I tried this:
input[time] {
margin: 2px;
}
...but it does nothing.
Just to see what, if anything would happen, I also added parring: 2px; but still nothing. So how can I get the time element to shove other elements that invade its personal space out of the way?
you need to specify it is a type like so
input[type="time"]{
margin: 2px;
}
This article goes other this further if you are interested,
Kieran
Use input[type="time"] instead of input[time]
The [attribute] CSS selector targets HTML tags who have a certain attribute no matter the attribute's value.
The [attribute="value"] CSS selector targets HTML tags with an attribute with a set value.
I've got a DIV covering the entire document:
<DIV style="position:'fixed';left:'0px';width:'100%';height:'100%';top:'0px',z-index:-20">
The zIndex of -20 is to prevent the DIV from coming up on top of other elements and interfering with mouse events.
However, when the page is busy with an asynchronous request, I want to bring the DIV to the top. My async request function sets the class of a user-defined variable element to "AJaXBusy" and then I style that class however I want. However, in this case, the style of "zIndex:100" isn't working, because the default value of -20 is overriding it!
Here's the code I'm using the show the DIV:
css('.AJaXBusy').backgroundColor="#ffddff"
css('.AJaXBusy').zIndex='100 !important'
(The CSS function returns a style-sheet object style property, it's about 30 lines of code so I have omitted it.)
How do I get a CSS class definition to override the value that has been assigned directly to the element? I've read about specificity and inheritance, but it didn't seem to address effects applicable in the document itself.
If you use JS to set element style (i.e. ele.style.zIndex), then '100 !important' is not a legal value (while '100' is), so the expression silently fails.
However, if you use ele.setAttribute('style', '.....'), then !important could be applied.
And, inline style has much higher previledge than css class, so you cannot override it.
A much better approach would be, if you could edit HTML, use different class definitions.
<style>
.undercover { z-index: -20; }
.cover { z-index: 100; }
</style>
<div class="AJaXBusy undercover">
Then change class name when you want to make it
var ajaxBusy = document.querySelector('.AJaXBusy')
ajaxBusy.classList.remove('undercover')
ajaxBusy.classList.add('cover')
use !important after your declaration.
z-index:100 !important;
As others have said, zIndex is how you update the property in javascript, elsewhere you refer to it as z-index.
I would recommend that instead of using a negative z-index to attempt to stop it interfering with the page, leave the z-index high, and hide the DIV using the css display:none; and only show the DIV when you want it to block page interaction (during AjaXBusy).
The default input type is 'text'. I have always assumed then that CSS declarations targeting input[type='text'] would affect those inputs even if the type was not explicitly declared on the control. However, I just noticed that my default-type text inputs do not get the styles. Why is this the case? And how can I address this?
input[type='text'] {
background: red;
}
<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */
The CSS uses only the data in the DOM tree, which has little to do with how the renderer decides what to do with elements with missing attributes.
So either let the CSS reflect the HTML
input:not([type]), input[type="text"]
{
background:red;
}
or make the HTML explicit.
<input name='t1' type='text'/> /* Is Not Red */
If it didn't do that, you'd never be able to distinguish between
element { ...properties... }
and
element[attr] { ...properties... }
because all attributes would always be defined on all elements. (For example, table always has a border attribute, with 0 for a default.)
Because, it is not supposed to do that.
input[type=text] { } is an attribute selector, and will only select those element, with the matching attribute.
By CSS specifications, browsers may or may not use information about default attributes; mostly the don’t. The relevant clause in the CSS 2.1 spec is 5.8.2 Default attribute values in DTDs. In CSS 3 Selectors, it’s clause 6.3.4, with the same name. It recommends: “Selectors should be designed so that they work whether or not the default values are included in the document tree.”
It is generally best to explicitly specify essential attributes such as type=text instead of defaulting them. The reason is that there is no simple reliable way to refer to the input elements with defaulted type attribute.
To be compliant with all browsers you should always declare the input type.
Some browsers will assume default type as 'text', but this isn't a good practice.
try this
input[type='text']
{
background:red !important;
}