I am trying to implement the following CSS:
.sky:focus {border-radius: 25px; border: #000 solid 1px; outline: none}
And my HTML looks like this:
<a class='sky' href='#'><img src='cloud.jpg'></a>
I want a 25px border-radius on the focus, but it doesn't seem to be working. How can I set the border-radius on focus for the image inside an anchor tag?
Expected result:
Current result:
Thank you for your help in advance :)
Thanks to Théo Benoit for providing the solution!
.sky:focus {background-color:#fff; border-radius: 5px; border: #000 solid 1px; display: inline-block; padding:2px;}
I created an automatic image scroller div consisting of a ul with small images. The aim is to have a basic scroller that starts running once the page loads. It functions perfectly when I test the code (HTML, CSS, and a JS file with jQuery) locally in a bro ...
Firstly, I am not interested in using javascript confirm for this purpose. Please read on. For example, adding an onClick attribute to each link with a function that triggers a system dialog box is not what I want. Instead of the standard system dialog bo ...
Having recently started working with Telerik UI, I am struggling to customize a Kendo form in ASP.NET Razor Pages. Specifically, I am trying to rename a button but cannot locate the button field within the code. Despite following the guidelines provided in ...
In the process of upgrading all my websites, I decided to redesign them so that all URL's default to lower case. This meant changing all image names and paths to lower case as well, which was accomplished using regexes. However, this action inadverten ...
Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...
I've designed an ASP.NET MVC application with a list that displays all the current items from a database. There is also a button that triggers a popup-dialog to create a new entry. The goal is to automatically add the new item to the list once it is c ...
To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...
I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...
I am looking to incorporate the following features: I would like to personalize the user experience by greeting them with their login name on the webpage (e.g. 'Hello, Fred!'). I also want to display or hide certain content based on the user&apo ...
Recently, I delved into the realm of utilizing AMP for my blog. After perusing the documentation and observing examples of its application, I must say that anything enhancing performance is a welcome addition to me. Therefore, I am keen on incorporating i ...
Here is the code in my boot.php file where I have set up the links <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#/valley">Valley</a></li> <li role="presentation"><a href="#/beach"> ...
<div class="col-lg-3 col-md-4 pl-md-1"> <label class="ORGAd16-preview"> input type='file' name="modelvariant_file" id="imageUpload" accept=".png, .jpg, .jpeg" > <img id="ima ...
In my current project, I am facing an issue with maintaining the aspect ratios of images of different sizes. Most of them are looking good except for those whose width is smaller than the container's width of 285px. Even though some blurriness is acce ...
Hey everyone! I'm in the process of creating a webpage that features a table with metadata regarding PDF files. To enhance user experience, I want to provide users with a preview of stored files in an off-canvas format. This is my HTML file setup: & ...
On my webpage, I have a table displaying users' data. Each row represents a user and includes their business card, which is a clickable tag that opens a PDF file stored on the server. <td class="business_card"> <a href="/static/users_doc ...
Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...
Currently, I am working with some HTML5 code: <li class="tile google" data-target-activation="click" data-target="loading"> <div> <a href="#">Search Google</a> <h2>Google</h2> </div> </li> Upon ...
I need help with displaying multiple results in a dynamically created table within my program. Even though I want to show around 25 records, the program cuts off after the 5th record, leaving empty space. The issue seems to be that the area does not expand ...
Trying to enhance a selected item with an additional UI element using a pseudo-element. Specifically, looking to add a line above the menu item. https://i.stack.imgur.com/MZnmw.png The code I've implemented is not displaying the desired line: const ...
Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...