What is the best way to remove the default outline in the <img> tag?

<img class="image_cover" src = "" />

.image_cover {
    width:25px;
    height:25px;
    border-style:none;
    border: 0;
    box-shadow:none;
}

Showing an example in a live demo on jsfiddle

Encountering an issue in Chrome Version 33.0.1750.152, where a border is visible around the <img> tag. Trying to remove it.

Following advice from this source, I have set the border, border-style, and box-shadow attributes, yet the border persists.

Any suggestions on resolving this issue?

Answer №1

When an img tag has an empty src attribute, Chrome will automatically display a border around it.

To solve this issue, you can insert a transparent png or gif into the img tag.

Answer №2

CSS

img {
    Border: none;
}

Give this code a shot, it will eliminate any default borders on images

Answer №3

The reason for this issue is the lack of a specified source. Once you provide an SRC, the problem should be resolved.

Answer №4

As mentioned by others, the border appears because the SRC attribute is empty. If the src attribute had a value, you could simply remove the border with border:none. However, this behavior is due to the default settings of browsers when encountering an <img> tag with no src, rendering border:none ineffective.

If, for some reason, you wish to have an empty src attribute, you can achieve it like this. Although, the purpose of having an image tag without a src might be unclear.

<img class="image_cover" src="" />

.image_cover {
    width:25px;
    height:25px;
    content: "";
}

DEMO:

http://jsfiddle.net/krishollenbeck/H4TNw/8/

Answer №5

The reason for the outline appearing is due to the absence of a valid image url in the src attribute setting.

Answer №6

To remove the border outline, simply set the border color to transparent.

img{    
    border-color:transparent;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Swapping two values of input forms in HTML using jQuery interchangeably

I need help figuring out how to dynamically update the values of two input fields on a form interchangeably. For example, if input one represents the current price of Bitcoins and input two represents USD, I want to be able to change the value of one input ...

The copyright (©) symbol is unresponsive to rotation

Why can't I rotate the © character? Am I missing something? .copy { font-size: 12px; font-family: Arial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } <span class="copy">&copy; This is not ...

How to change the hover effect of a span with CSS

I am currently attempting to modify the hover effects of my spans. Due to a specific requirement, I find myself needing to assign the same id's to all <li> elements that contain my spans. This results in all of the spans having the same parent i ...

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Presented here is my JavaScript code. function appendItemforPurchaseOrder() { debugger var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber")); rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1; var addNewItemDetailHtml = ...

Error: Unable to assign value to the innerHTML property of an undefined element created by JavaScript

When designing my html form, I encountered an issue where I needed to display a message beneath blank fields when users did not fill them out. Initially, I used empty spans in the html code to hold potential error messages, which worked well. However, I de ...

What is the best way to define the location of a button's on-click event using jQuery?

I'm having an issue with my website. It's a Wordpress site using the Contact Form 7 plugin. On the homepage, there is a button labeled "Get a quote" that I want to link to google.com when clicked. I tried using jQuery but it's not working pr ...

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

Turn an item by x degrees, not towards x degrees

Is there a way to rotate an object by a specific degree, rather than to a specific degree? I am familiar with using transform/-webkit-transform to rotate an object by a set degree, but I am looking for a method that will rotate my object by the specified ...

The media query targeting a specific max-width and below appears to be malfunctioning

So, I'm experiencing an issue where the browser I'm using doesn't seem to be picking up the styles I've set for a max-width of 960px and below. Can anyone provide insights into what might be causing this? Any assistance would be highly ...

The addition operation in JavaScript seems to be malfunctioning as it is not adding up my values

After encountering an issue with calculating the number of payments, I discovered that the addition operator was not functioning as expected. Instead of summing up values, it was treating them as strings. For instance, when trying to add 3 and 5, the out ...

Utilizing jQuery to retrieve multiple values from a select box through the onchange event

I have two select boxes with JavaScript on them. When I use filter1, my URL changes to www.url.com/&filter[]=6827 and it works perfectly. The selected option also works without any problems. However, I want a new select box like filter2 with multiple f ...

Learn how to update a fixed value by adding the content entered into the Input textfield using Material-UI

I made a field using the Input component from material-ui: <Input placeholder="0.00" value={rate} onChange={event => { this.setState({ `obj.rate`, event.target.value }); }} /> Whenever I input a rate into this field, ...

The picture tag in HTML5 is failing to be responsive when used with Bootstrap

I'm experimenting with the html5 <picture> tag to set different images. I placed the 2 pictures within a bootstrap grid, allowing them to be responsive until the breakpoint 768px, where the image changes. However, when I decrease the browser si ...

Passing parameters in a jQuery function through a button click

I am trying to figure out how to pass the @item.Id value as a parameter in the click function for a button. Here is the code snippet: <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#Ed ...

Trouble with displaying images in Bootstrap 4 cards

I am currently experimenting with Bootstrap 4 and trying to create cards, but I am facing issues with images not displaying on the cards. Currently, I only have one image in the first card, but it still does not render. You can view the code I have written ...

In a React application, the input field unexpectedly loses focus after typing just one character

Has anyone encountered an issue with a dropdown menu causing input field focus to be lost after typing one character? I've attempted setting unique keys for each field, but it hasn't resolved the problem. For reference, here is the link to the p ...

Arrange blocks within bootstrap columns using grid css

I have a layout with two columns, each containing two blocks Currently, the mobile order is: 1 2 3 4 But I want it to be: 3 1 2 4 I attempted to use CSS grid but I am unsure how to move block 3 out of column 2. Here's the code snippet: body { ...

Retrieve the 'id' value located within the 'img' tag of HTML code by utilizing Beautiful Soup in Python

Given the following code snippet: id_image = soup.find_all("img")[2] print(id_image) The result is: <img id="nexperts-logo" src="images/nexperts.png"/> I am trying to extract and print only the id value, which is ...

Providing data from a javascript xml file upon page initialization

I am aiming to extract multiple values from an XML file as soon as an HTML page is loaded. The XML file remains constant and will not change over time. It will be stored in the same directory as the HTML page. The purpose of this XML file is to fill severa ...

Conceal all components on a webpage with the exception of a designated div

I am looking to selectively hide elements on the page, revealing only the contents of div.k1. The page contains numerous elements. How can I achieve this using just CSS? <div>1-this will be hidden</div> <div class="k1"> 2-this div wi ...