Looking for a solution using the element+element-Selector to modify CSS for an element following a button.
This code snippet functions in Chrome, Edge, and Firefox but not Safari on 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 suggestions on how to resolve this issue?
Appreciate your assistance.
Did you know there is a glitch in Safari? When you click on something, it doesn't trigger the focus event as expected. Instead, the focus event occurs when you press the TAB key.
Alternatively, using :active can achieve a similar effect. However, it only lasts until you release the mouse button.
.button:focus+.change, .button:active+.change{
color: red;
}
To address the problem in Safari, simply include the "tabindex" attribute in your HTML tag if you have an 'a' tag. Here's an example:
<a href="#" tabindex='-1' />
For more information on the `tabindex` attribute, check out this link.
.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 code was effective for me specifically in safari and firefox. Cheers
.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>https://i.stack.imgur.com/toxDA.jpg I am striving to replicate the layout demonstrated in the image below So far, I have the following code snippet: <Grid container justify=“space-between”> <Grid container item> <Grid ite ...
Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...
Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development. The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of th ...
Is there a way to track mouse cursor movements, button clicks, and click times to an external database using only CSS, HTML5, and Javascript? I am curious about the possibility of conducting usability studies in this manner. ...
I am currently designing a mobile menu for a website that I created using Wordpress with the Divi Theme. When the user clicks on a "hamburger icon", it triggers a fullscreen menu to open: mobile menu If you tap on "Termine", it will reveal a submenu: mo ...
Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...
There is a tags section on the blog detail page. The html code for it is as follows: <td class="tags"> <a href="">tag1></a>, <a href="">tag2</a> </td> However, the tags are appearing on separate lines instead of in ...
Is there a way to repeat a background image to fit its content? I have a background image that needs to be repeated in this manner: https://i.sstatic.net/qVKkp.png However, when using the following code: .imgbord { background: url('https://i.imgur ...
I've recently integrated the jquery.videoBG plugin into my project to add a video background. Here's the HTML code: <div id="div_demo"> <div class="videoBG"> <video autoplay="" src="media/snow.mp4" style="position: abso ...
After successfully implementing a hover effect on my menu item using CSS, I am now struggling to make the sub-menu appear below the menu item upon hovering. Despite my efforts to search for jQuery solutions online, I have not been successful. Are there a ...
Check out the JSFiddle here I've created a full-width CSS menu that spans the entire screen, but I'm struggling to figure out how to make the corresponding subnav items appear below their parent items. Is it even possible to achieve this design ...
Seeking assistance below, following codes are sourced from "example.com" as assumed: <a href="http://www.example.org" target="vo1" onclick="gp(1)" rel="nofollow">Click Me</a> Upon clicking on ...
I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...
I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...
Hello, I have an unordered list with some list elements and I am trying to apply a CSS style to highlight the selected list element. However, the style is not taking effect as expected. function HighlightSelectedElement(ctrl) { var list = document.ge ...
Hi everyone, I've encountered an issue with adjusting font sizes based on screen size. My framework is Bootstrap 3 and I'm using LESS. Here is the initial part of my LESS code: @font-size-base: 16px; @font-size-large: ceil((@fo ...
I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...
Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...
I have recently developed a slider on this page: While the slider functions smoothly in Chrome, I am facing compatibility issues with Firefox. Can anyone shed some light on why this might be happening? Here is the HTML, CSS, and JS code used for the slid ...
I am facing an issue with displaying 2 images in IE8 and IE9. Below is the code snippet causing the problem: .ui-widget-content { border: 0px solid #aaaaaa/*{borderColorContent}*/; background: rgba(0, 0, 0, 0.1) ; /*{bgColorContent}*/ url(images ...