I created a component with a template containing a div holding the "input"-value and an indicator showing if capslock is active. When I add the Bootstrap .form-control class to the host element, it looks pretty much like other input fields except when being focused or disabled.
Is there a way to make use of :disabled and other pseudo selectors like :focus defined in Selectors 3 when creating Angular Components?
I'm stuck with finding a good way to create form components that shares the look and feel of other input components.
Are there other (preferred) ways to make use of input stylings without having to redefine everything?
Would it be better to create a directive and "hack" the template using Renderer2?
Not sure if that's what you are looking for, but having a template like
<div class="form-control">
<input type="password" class="custom-input">
</div>
try targeting your input with a css class and style it (if you are using scss) with e.g.
.custom-input {
//some styles
&:disabled {
color: grey;
background: lightgrey;
}
}
If you are using regular css you could do something like
.custom-input:disabled {
color: grey;
background: lightgrey;
}
Related
I want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.
some thing like this ( btw this code doesn't work ) :
a:active div{
background-color : blue;
}
Without Javascript your options are rather limited.
You have to find a way to toggle the state by a click and be able to express those states in CSS.
Some option might be theese:
using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
using anchors and their pseudo classes (like you already attempted to do)
The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.
My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:
.dynamic-content {
display: none;
}
#first:target, #second:target {
display: block;
}
<div>
<div id="first" class="dynamic-content">
First dynamic content
Hide
</div>
<div id="second" class="dynamic-content">
Second dynamic content
Hide
</div>
</div>
Show first
Show second
One way ,I use :focus pseudo class. div:focus a {}
I have a Wordpress website which contains a lot of pre-written CSS-code. One of the prewritten code-snippets looks like this:
input[type=url] {
color: #666666;
... (a lot of other styling properties)
}
Now I wanted to create a design for a single page which contains an input field of type url.
<input type="url" id="input_url" class="dtd-settings-element"></input>
The problem is, that I want to style this input field completely on my own but the pre-written code is affecting that style. Is there a possibility to "deactivate" the pre-written CSS snippet for my new input field?
I know that I can overwrite all the attributes from the pre-written snippet in my dtd-settings-element class. But doing this for multiple elements would not be optimal.
Thanks in advance for pointing me in the right direction :)
EDIT:
Last thing I tried was:
input[type=url]:not(#input_url)
You can use the unique id of the input field with !important to target that element and just apply whatever style you want...
#input_url {
color: red !important;
}
You can try to override styling.
#input_url input[type=url] {
color: #000;
font-size: initial;
...
}
Unfortunately there is no way to deactivate pre-written CSS in your terms. All the possibilities you have already mentioned:
Override all class properties
Modify original styles
Change type attribute
However you can change tag from input to (for example) textarea.
On inspecting a webpage, I found an HTML element of interest, and looked at its css style properties below.
.Node-bullet:before {
font-family: "IcoMoon", sans-serif;
font-size: 16px;
content: "\e90d";
}
I am trying to use stylish (chrome plugin) to overwrite that CSS.
.Node-bullet:before[content="\e90d"]{
content: none !important;
}
Its not working unfortunately. Is there a way to specifically search for a CSS class with an existing attribute[content], filter its value [\e90d], and overwrite it?
I know this is not efficient for production-level sites, I'm simply modifying my notetaking app client-side. I've tried looking at other selectors like descendent but I can't seem to find an easy pattern
EDIT
Overall HTML structure looks like this:
<div class="Node-self">
<div class="Node-bullet">
::before <!-- SELECT THIS -->
::after
</div>
</div>
<div class="Node-self is-collapsed">
<div class="Node-bullet">
::before <!--DO NOT SELECT THIS -->
::after
</div>
</div>
content is a property, before a selector: you can not mix them.
For example you can find all anchor with attribute target _blank, but not with specific "content" or "background".
a[target=_blank] {
}
Not the specific answer to this problem, but the answer to the overall issue I had using a NOT with a descendent selector
.Node-self:not(.is-collapsed)>.Node-bullet:before{
content: none !important;
}
I want to set the focus on a button on particular event.
The pseudo code for this can be,
if (event == "EventX") {
document.getElementById('myAnchor').focus();
}
is there a CSS equivalent for document.getElementById('myAnchor').focus();?
You can't change the state of an element using CSS. While CSS can style elements based on specific states, it cannot actually trigger those states. To do that, you use JavaScript, not CSS, since the DOM APIs are implemented in JavaScript, not CSS.
I think am getting confused here, as #Paulie commented, I think what you are looking for is to autofocus an element on load than you cannot do that with CSS, if you want, you need can use autofocus attribute on the element you want to get the focus on, like
<input type="text" autofocus />
If you want to style the focused element then you need to use :focus pseudo
input[type=text]:focus {
border: 1px solid red;
}
Demo
As I read your id it says myAnchor so you can write your selector like — to make it more specific
#myAnchor:focus {
/* Styles goes here */
}
Is there anyway i can access the style property for the particular div? For example, I have a code like below
<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
I want to apply some other background color for this division. But i don't want to modify the class "testing", because it is being used in some other places also. Is there anyway using CSS only to access the style property and apply my new color?
I think attribute selectors may be what you are looking for:
div.testing[style="background-color:#ff00ff;"] {
background-color: new_color !important;
}
You can create another class and overwrite necessary property:
.testing-active {
background-color: red;
}
and use it like this:
<div class="testing testing-active"></div>
You need to make a style that has higher priority than the style. You could use the !important attribute to do that:
<div class="testing" style="background-color:#ff00ff;background-color:red !important;">
Big important caveat: whatever it is you're trying to do doesn't sound like a good idea, because the code will be very difficult to maintain. What is the underlying problem that you are trying to solve?
You can access the elements with this certain style like this:
.testing[style="background-color:#ff00ff;"] {
/* put your attributes here*/
}
but you cannot change the background-color attribute since this one has a higher priority in the html.
see this:
.testing[style="background-color:#ff00ff;"] {
background-color: #00f; /* not possible */
margin: 30px; /* possible */
}
what you can do is add a new attribute to your html like this:
<div class="testing" changecss="true">
This is my test Paragraph
</div>
and add this css:
.testing[changecss="true"] {
background-color: #00f;
}
See the JsFiddle as well.
"Think it is a dynamic code. How can i add new class without using javascript? "
The Answers is You cannot add a new class using CSS dynamically/ runtime. The only way to do it is by using javascript/jquery:-
HTML:
<div id="mydiv" class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
JQUERY:
$('#mydiv').css('background','#ColorCode');
This way your class also wont change( since its being used in other places) and you can change the background also.
Can i ask why you are trying to achieve this using CSS?