I just have a simple button tag in HTML with a simple CSS Selector
and when I render the same 2 of my properties getting crossed out
there is no other selector applied on the button tag and I have also checked the parent tags no CSS selector is changing the color on parent tags as well. Could someone please help me if is there a way to identify why these 2 properties are getting crossed out?
.call-button {
width: 100%;
margin-top: 0.5rem;
height: 2rem;
background-color: orange;
color: #fff;
border: orange;
border-radius: 0.3rem;
}
<button class="call-button">My button</button>
There is a chrome page specifically for this here: https://developer.chrome.com/docs/devtools/css/overrides/
From the Elements panel, open the Computed pane.
Scroll through the list of properties and expand the one that you want to investigate further.
Click the blue link next to a declaration to jump to open the Sources panel and jump to that declaration's source code. See Make a minified file readable if the code is minified.
Related
Home
Read Here
I made four labels in my HTML code with different texts. But I don't know how to specifically pick one to style in my css file.
Unable to help fully without seeing your code but I would say apply an id="name_of_element" to each text element.
Then in you .css file use #id-name-here to apply styling to each text element individually.
#element_id_here {
color: blue;
font-weight: 600;
padding: 5px;
margin-top: 10px;
}
You can change the parameters to suite your needs but these are just an example.
I am basically trying to build a chrome extension where I will be displaying my modules in all the sites.
Basic extension usage -
When I click on my extension there will be many popup modals which will be rendered in websites.
Problem -
These extension popup modals as a specific set of CSS which is being overwritten by the site CSS.
Sass Approach -
To avoid overwrite in css from existing site to extension I used the following approaches,
CSS Specificity
Where I had a parent class for my extension modal and inside it I will be writing all my css classes.
.parent{
& .header{
//css properties
}
}
CSS reset
Where when loading my extension all basic elements will be set to initial
input[type="text"]{
all:initial;
border-radius: 3px;
padding: 8px 10px;
width: inherit;
border: 1px solid #c8ccd0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
visibility: inherit;
font-weight: 200;
line-height: 0;
}
Using !important
All these approaches I tried but still there are few cases where my CSS is being overwritten by the existing sites.
Failure Cases -
For example - In my extension modal if I have a button element and I have given background-color as blue
button{
background-color:blue;
}
In the site where the extension is loaded as a property of
button{
background-color:red !important
}
Then it automatically takes the site property and its being overwritten in my extension css.
Solution Needed
It will be great if someone provides me a idea how to use a css for extension so that its not going to be affected by existing sites CSS.
Make sure when you write css you either follow
BEM(Block Element Modifier) technique.
You can give a specific pefix to the css class or id.
You can try injecting custom html tags which you can then use to point the styles out.
You could do with writing the CSS more specifically to prevent the !important tags overwriting your CSS.
For example:
div.CLASS-NAME > button.CLASS-NAME {
background-color: blue;
}
Might be worth reading up on CSS specificity - http://tutorials.jenkov.com/css/precedence.html
i suspect there's a problem with the way browsers are applying default styles onto things like <button> elements
to fully understand my conundrum, this involves the shadow dom, and i'll explain that at the end, however for now, let's just focus on a version of the problem i have isolated to a simple question about CSS:
how can i reset a <button> to it's original browser default styling?
i've tried setting properties like border: initial;, and border: unset; and border: inherit;, but in every case, setting any of these css properties on a button element causes the browser to release any of its default styling
please see the following example on codepen
<button>control</button>
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
<button id="b4">b4</button>
<button id="b5">b5</button>
<button id="b6">b6</button>
<style>
#b1 { background: initial; }
#b2 { background: unset; }
#b3 { background: inherit; }
#b4 { border: initial; }
#b5 { border: unset; }
#b6 { border: inherit; }
</style>
in this example, the first button is a control, so we can see the default browser styling
on the buttons where we try to reset background, the button totally changes style, the background disappears, and even the border changes
on the buttons where we try to reset border, the button totally changes, but oddly in a different way -- here the border disappears, and the background changes
what explains these strange and unexpected results?
why do i need to reset a button, you ask? that seems like a weird thing to do, you think? consider my use case involving web component and the shadow dom:
i'm using the shadow dom with some web components
i want to allow users to OPTIONALLY set styles on some shadow <button>s
so i set button { border: var(--button-border); }
however even when the user doesn't supply --button-border, the button is visually manged and browser styles are not applied
even setting button { border: var(--button-border, initial); } and the other examples don't work
how can i give the users of my components a hook to style the buttons away from the default, however leaving intact the default buttons when they decide not to apply any button styles?
i feel like i'm stuck in a pickle here, and the browser might not have an answer to this problem — i fear that i'll have to either abandon the default styling for buttons within my components (bad practice, the default buttons are meant to be familiar to users), otherwise abandon any custom styling to the buttons (bad for designers that's for sure) — is there any hope to salvage this situation?
Try:
button {
background: none;
border: none;
padding: 0;
}
On the following page, http://duncanmorley.com/ there are the following issues:
One cannot highlight text within the document
When a user hovers over an object with the ":hover" property applied,in the CSS file, the hover effect doesn't happen (See social icons at the top) (class="fb")
It seems that there is a transparent object over the page which is not allowing the user to interact with the elements. I'm unsure what this is, as there is nothing in the CSS file (that I can see) that suggests this is the issue.
I believe these issues are likely the result of one problem.
text-indent: -99999999px; causes the issue here because it will modify the area hover works, too.
Fix for the Facebook share button (an example)
Remove the text-indent style from the fb class and change <li class="fb">Facebook</li> to <li class="fb"><span class="hide">Facebook</span></li>
Now you can style the text the sr-only way:
.hide {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
At the end you should get the same effect, the "Facebook" text will be hidden for the visual presence and the hover effect will work on the entire element.
Oddly enough, your text-indent is too large. If you make it -9999999px instead, Chrome seems to like it better.
(See update below)
I have two files: a .css file, and an index.html document. The idea is to have a panel of buttons on the screen [for prototyping usability of a touchscreen interface] with each button assigned a particular position on screen (see the "margin-top" and "margin-left" tags in the .css file. Later on I'll be adding onclick functionality etc.
For now though, I am trying just to get them to display correctly on the screen.
What's strange, is that the first element in the .css part (ie. the .aButton #....) is always displayed up at position (0,0) when displayed in the browser. eg. at the moment, button1 will be up at (0,0) but all the other buttons are in the correct places.
If I change the css code, and move the button2 section up above the button1 section, then button1 is rendered in the correct place, but button2 is now at (0,0).
Would be very grateful for any ideas!
Here are the relevant parts:
from index.html
<div id="buttonPanel" class="aButton">
<div id="button1" class="aButton"></div>
<div id="button2" class="aButton"></div>
<div id="button3" class="aButton"></div>
<div id="button4" class="aButton"></div>
<div id="button5" class="aButton"></div>
</div>
from styles.css:
.aButton #button1
{
margin-top: 262px;
margin-left: 110px;
}
.aButton #button2
{
margin-top: 24px;
margin-left: 347px;
}
.aButton #button3
{
margin-top: 32px;
margin-left: 114px;
}
.aButton #button4
{
margin-top: 524px;
margin-left: 104px;
}
.aButton #button5
{
margin-top: 392px;
margin-left: 106px;
}
Update: Have updated Fr0zenFyr's jsfiddle with the whole html and css files and get an identical problem! http://jsfiddle.net/b4NYd/
It was silly of me not to include them both before, as I now suspect it's got something to do with the .aButton #buttonx {} definitions interacting strangely with the #buttonx {} definitions beforehand.
I can manage to make the problem go away by merging the two, but I really would like to understand why this kind of problem occurs, as I'd like to use different classes later when prototyping different layouts.
Update: All sorted! It was my comments, argh!
the problem is your comments. that's not how comments are written in css.
you need to use /* notation.
do this
/* interface 1 */
/* need to change all of these according to what numbers I've got in my logbook.*/
Moving the order of the CSS, in your case, should not affect the output of your HTML elements. You can reverse the order of all css classes for your buttons and that should not affect anything.
Have you overridden any other css? Have you set the elements to inline-block perhaps, or as btevfik touched upon, are you using any positioning on the elements? Are you overriding your button css at a later point in your css file?
There must be some other issue elsewhere causing your buttons to move around the screen.