Disable the borders on HTML input fields

I am looking to implement a search feature on my website.

It seems that in Firefox and Internet Explorer, the search function appears fine without any unexpected borders.

Firefox

IE

However, when viewing the search function in Chrome and Safari, there is a strange border around the input element.

Chrome

Safari

Below is the HTML and CSS code I have used:

<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />

The CSS rule border:0 has been applied to all elements.

#generic_search
{
    font-size: 14px;
    width: 250px;
    height: 25px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 7px;
}
#generic_search_button
{
    float: left;
    width: 25px;
    height: 25px;
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

How can I eliminate this unwanted border?

csscross-browserzurb-foundation

Answer №1

Just using border: 0 may not solve the issue entirely. It's possible that the default styling of the button in your browser is causing interference. Have you experimented with setting the appearance to none by using -webkit-appearance: none?

Answer №2

It's really easy

input {border:0;outline:0;}
input:focus {outline:none!important;}

Answer №3

border-width:0px;
border:none;

This solution has been effective for me across various browsers such as Chrome, Safari, Firefox, and Internet Explorer 🙂

Answer №4

For my situation, I found that when incorporating a CSS framework that includes box-shadow, I needed to include the following as well:

box-shadow: none;

Therefore, the entire code snippet would look like this:

border: none; 
border-width: 0; 
box-shadow: none;

Answer №5

Whenever I need to get rid of the border around a focused input, I rely on this handy CSS code snippet. Hopefully it will be useful for you too:

  input:focus, textarea:focus, select:focus{
    outline: none;
}

Answer №6

Here is the appearance of your code: jsfiddle.net/NTkGZ/

Give this a shot:

border:none;

Answer №7

Give this a shot 

#unique_search_button
{
    float: left;
    width: 24px; /*fresh width*/
    height: 24px; /*fresh width*/
    border: none !important; /* no borders and override any inline styles*/
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

It seems like the image dimensions might need adjusting

Answer №8

Here is a solution to your problem:

.yourClassName{
    border: 0;
    outline: none;
   }

Answer №9

To make the border invisible, use the style {border: transparent;}. Even though the border is still present, it will not be visible.

Additionally, as mentioned by someone earlier, apply outline: none when focusing on the element.

Answer №10

Feel free to use this suggestion, it could be beneficial for you. border:none !important; background-color:transparent;

Give this a try

<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>

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

The visibility of a CSS class is rendered non-apparent when formed through the implementation

function retrieve_files(){ $.ajax({ type: "GET", url: "retrieve_files.php", cache: false, success: function(result){ $("#insideT").html(result); } }); } retrieve_files.php $dir = 'upload ...

jquerycssajax

Utilize flexbox to create a list that is displayed in a column-reverse layout

I am facing a challenge in displaying the latest chat person in the 1st position (active) using Firebase. Unfortunately, Firebase does not have a date field which makes it difficult to achieve this. I have attempted converting the date into milliseconds an ...

javascripthtmlcssfirebaseflexbox

Creating a Sticky Header and Footer with Responsive Design: Ensuring Content Div Expansion between Them

Greetings. I am working on creating a simple responsive HTML layout as described below: HTML: <div id="header"></div> <div id="content"></div> <div id="footer"></div> CSS: #header{ wi ...

htmlcssresponsive-design

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries

Navbar collapse not functioning properly on HTML, CSS, and JavaScript

I have developed a CSS code snippet: .nav{ right: 0px; left: 0px; margin-top: 0px; margin-bottom:20px; height: 35px; text-align: center; background-color: red; z-index: 1; } .sticky { background: #000; text-align: center; ...

javascriptjqueryhtmlcsstwitter-bootstrap

The bootstrap table did not meet my expectations as I had hoped

I am currently using Bootstrap to create a basic two-column table similar to the one on the Bootstrap website here: http://getbootstrap.com/css/#tables. To achieve this, I have implemented a javascript function to display the table as shown below: $(&bso ...

javascripthtmlcsstwitter-bootstrap

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

javascripthtmlcsstwitter-bootstrapangularjs

Navigating through each element of an array individually by using the onClick function in React

I'm currently working on a project that involves creating a button to cycle through different themes when pressed. The goal is for the button to display each theme in sequence and loop back to the beginning after reaching the last one. I've imple ...

javascripthtmlcssreactjsnext.js

What are some methods to achieve consistent alignment of input fields across different mobile devices using CSS?

I have been working on a login page that looks good on desktop and laptop devices. However, I am facing an issue with its display on mobile devices. The design appears differently on various mobile devices - for instance, it looks acceptable on an iPhone 1 ...

htmlcsscakephp-2.0

The element is anchored within a div, but its position is dependent on a JavaScript script

I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...

javascriptjqueryhtmlcss

Can you provide instructions on creating a small border at the center of an h1 heading?

What is the best way to create a small border in the center of an h1 text element? ...

htmlcss

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...

cssnpmsasswatch

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

I successfully applied rounded corners to the first and last elements of a styled button using CSS. Here is how it looks: The issue arises when I dynamically insert new buttons using Angular's ng-if. The new buttons disrupt the rounded corners of th ...

cssangularjs

Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

In my search on SO, I came across a lot of information about rotating gradients. However, my issue is the opposite. I have an icon created from multiple paths that I want to fill with a vertical gradient. I have successfully done this and it works well. ...

cssanimationsvglinear-gradients

Troubleshooting Problems with Adjusting Left Margin Using JQuery

function adjust_width() { $('#cont').toggle(function(){ $('#cont').animate({marginLeft:'0%'}); },function(){ $('#cont').animate({marginLeft:'18.4%'}); }); } The code above is in ...

javascriptjquerycss

Click event not triggering to update image

I'm currently working on a Codepen project where I want to use JavaScript to change the image of an element with the id "chrome". However, my code doesn't seem to be working as expected. Can someone help me troubleshoot and fix this issue? Your a ...

javascripthtmlcss

Preserve the div's aspect ratio using CSS styling

Is there a way to design a flexible div element that adjusts its width and height in sync with the window's size changes? Do any CSS techniques exist that would allow the height of the div to adapt based on the width, while still preserving its aspec ...

htmlcssresponsive-designaspect-ratio

Unable to set items as sticky within mat-tabs

Is there a way to make my image stick in place using the following CSS code? position: -webkit-sticky; position: sticky; top: 1px; I have tried implementing it but haven't been successful. HTML: <mat-tab-group class="user-tabs" (selectedTa ...

cssangularangular-materialmat-tab

"Implementing a 960 Grid System with an HTML5 Header Element

Exploring 960.gs and HTML5 as a beginner has led to some challenges. My current project involves an image spanning 2 grid units, followed by a div taking up 5 units on the same line, with a line break needed before displaying a heading. I attempted the la ...

csshtml960.gs