I'm trying to use the element+element-Selector to change the CSS for an element following a button.
The following snippet works in Chrome, Edge, Firefox - not in Safari for MacOS:
.button:focus+.change{
color: red;
}
<p>When you focus the button, the text color should change to red.</p>
<button class="button">click me</button>
<div class="change">Change color</div>
Any ideas, how I could resolve this problem?
Thanks for your help.
There is bug in safari. It will not give focus event on click in safari. Instead give focus event on TAB click.
Or :active will give effect. But, upto when mouse press. When you release it will remove effect.
.button:focus+.change, .button:active+.change{
color: red;
}
Fiddle Link
If you have 'a' tag, you can just add "tabindex" attribute to HTML tag to fix this issue on Safari. For example:
<a href="#" tabindex='-1' />
Read more about tabindex here
.buttongroup button {
margin-bottom: 10px;
display: block;
border-radius: 10px;
width: 100%;
background: #f1f2f2;
color: black;
border: none;
height: 45px;
}
.buttongroup > button:focus {
background: #25a0da !important;
}
/* This worked for me in safari and firefox. ATB
.buttongroup > button.selected {
background: #25a0da !important;
}*/
<div class="buttongroup"><button ga-tag="input" data-value="patient" class="selected">Hey</button><button ga-tag="input" data-value="caregiver" class="">There</button></div>
Related
I have an issue with the ::first-line selector in Chrome. In Firefox and even IE11 the result looks correct.
Here is what I expect it to be: Rendered in Firefox/IE11
Here is what I get in Chrome: Rendered in Chrome
But there is a weird behaviour in Chrome which results in a correct rendering:
open the developer panel (F12)
select the "t1b" item
untick the "box-shadow" property
tick it again
Here is a link to an example: jsfiddle.net/smc0hx78/
<body>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>
body {
font-size: 50px;
}
.test {
width: 2.5em;
height: 3em;
line-height: 3em;
display: inline-block;
position: relative;
overflow: hidden;
box-shadow: inset 50px -50px 0 0 cyan;
}
.test span {
font-size: 13px;
}
.firstLine::first-line {
font-size: 13px;
}
"t1" has no "first-line" (working fine in Chrome)
"t1b" has "first-line" (not working in Chrome)
"t2" has "first-line" but for a sub element (working fine in Chrome)
I need t1b to be working in Chrome.
Do I have any error in my CSS?
Is there a workaround without a sub element?
Thank you for any help.
This seems to be a Chromium Bug, though I have not found anything like that in the Github Issues (still, it could be resolved in a future release)
You have two options:
1 - Add an empty div before your spans. It seems to work if you put an empty block-element before your inline-blocks (don't know why)
<body>
<div></div>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>
or 2 - Change inline-block to inline-flex. The bug seems to affect only inline-blocks
.test {
display: inline-block; /* OLD */
display: inline-flex; /* NEW */
}
This question already has answers here:
Internet Explorer button:active inner-padding
(3 answers)
Closed 2 years ago.
Take the code snippet below.
The button in the example should become black on mousedown (:active) - which works pretty fine - but IE11 additionally shifts the button text by some pixels to the bottom right if the mouse is on the button (:hover). You can see this by pressing the button and moving the mouse away from the button while holding down the mouse - the button stays active but as soon as the cursor leaves the button, the text is shifted back:
All other browsers (even Edge) work as desired.
As in IE11's dev tools only the :hover pseudo class can be applied, I have no idea where this shift comes from. I already tried to specify padding and margin for the button but without success.
input[type="button"] {
width: 200px;
height: 3rem;
background: #10275e;
border: 1px solid white;
color: white;
font-size: 1.2rem;
}
input[type="button"]:hover {
color: #10275e;
background: white;
}
input[type="button"]:active {
color: white;
background: black;
padding: 0;
}
<body style="background:#10275e">
<input type="button" value="Press me" />
</body>
Can anybody tell how to make IE11 not shift the button text on :active and :hover?
This has nothing to do with flex style, so why should it be a dupe?
Found a solution on another thread (from this question) !
The solution needs some changes on your code (the input need to be a button element), because we want to use a span inside the button.
button {
width: 200px;
height: 3rem;
background: #10275e;
border: 1px solid white;
color: white;
font-size: 1.2rem;
}
button:hover {
color: #10275e;
background: white;
}
button:active {
color: white;
background: black;
padding: 0;
}
button > span {
position: relative;
}
<body style="background:#10275e">
<button><span>Press Me</span></button>
<body>
That is the pressing effect which is added by the Internet Explorer by default.
There is no way to disable or remove it.
If you do not want that effect than below is the another work around that you can try with IE.
<!DOCTYPE html>
<html>
<body>
<h2>Test Button Element</h2>
<img src="https://www.freepngimg.com/thumb/submit_button/25387-5-submit-button-clipart-thumb.png"/>
</body>
</html>
Output in IE 11:
Here we replace the button with anchor tag which has role of button and we use the image which looks like button inside the anchor tag. So when user click it in IE, they will not get that pressing effect.
I am using Bootstrap 4 alpha. How can I customize (Eg: removing border-radius, changing bar base color, filled color etc...)?
Tried with below code.. but it is not working though :(
LIVE DEMO
HTML
<div class="b4-test">
<progress class="progress" value="75" max="100">75%</progress>
</div>
CSS
.b4-test{
padding:50px;
width:500px;
margin:50px auto;
text-align:center;
background:#ccc;
}
progress{
border-radius:0 !important;
background-image:none !important;
background-color:red !important;
color:green !important;
height:50px;
}
Check this snippet in Firefox
This snippet will work in Firefox only..
Edit
I have also created plunker to show in Firefox please check this
Firefox Plunker
.b4-test {
padding: 50px;
width: 500px;
margin: 50px auto;
text-align: center;
background: #ccc;
}
.progress[value] {
border-radius: 0;
background-color: red;
}
.progress[value]::-moz-progress-bar {
background-color: green;
}
<div class="b4-test">
<progress class="progress" value="75" max="100">75%</progress>
</div>
For Chrome check the below plunker
check this Chrome Plunker
Had similar problem, but I just wanted to change the color of the progress part.
My progress bar is the following:
<progress class="progress progress-custom" value="25" max="100">25%</progress>
I added the custom class progress-custom to the Object and defined some CSS for it.
.progress-custom[value]::-webkit-progress-value {
background-color: #FE6502;
}
.progress-custom[value]::-moz-progress-bar {
background-color: #FE6502;
}
.progress-custom[value]::-ms-fill {
background-color: #FE6502;
}
#media screen and (min-width: 0\0) {
.progress-custom .progress-bar {
background-color: #FE6502;
}
}
These additional CSS will change the color of the progress part. I also tested with the border-radius, it is also possible to change this to whatever you want.
I just tested it really quickly: Chrome and Firefox were affected by the changes, IE had the right color, but the border-radius did not work.
I have this code:
<div title="" class="icePnlGrp graButtonActionDiv graButtonBackgroundOn">
<label id="j_id89:j_id99" class="iceOutLbl graButtonActionLabel">Select</label>
</div>
With css:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
and
.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
I cannot figure out why on Firefox and IE, hovering on that div does not change the background image.... But on Chrome it works perfectly.
Can you please give me a helping hand?
Thanks.
Try giving the :hover style rule more specificity over its normal state, so:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
div.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
which will over write the original style rule
I have a button i want to convert the button into a hyper link, it works fine in Mozilla but in Internet Explorer it presses down as a button a click takes place ... so please help ....
Input.Button-Link, input.Button-Link:active
{
border: 0px;
behavior: url("cssHover.htc");
padding: 0px;
width: auto;
overflow: visible;
background: transparent;
color: Blue;
text-decoration: underline;
display: inline-block;
}
input.Button-Link:active
{
padding-right:50px;
outline:0;
}
Input.Button-Link:hover
{
cursor: pointer;
}
I don't understand what you're trying to accomplish but here are a few things you can try:
Add styles to input.Button-Link:focus
By using <input type="image" src="button.gif" alt="Button" />
In conjunction with jQuery use this plugin to style your buttons
You need JavaScript to solve this for IE.
IE's behaviour here is hard-coded and can't be changed with CSS IIRC. The last thing that springs to my mind is to use display: inline instead of display: inline-block.
You might be better off using a link and a tiny bit of JavaScript.