I require assistance in eliminating the border around the search bar

When I have a search bar and don't click on it, it looks like the image belowhttps://i.sstatic.net/SbDbf.png

But as soon as I type something, a blue border appears that I don't want. I'm not sure how to remove ithttps://i.sstatic.net/bOsjO.png

Here is the CSS code:

body{
    background: whitesmoke;
}
.header{
    display: flex;
    /* width:50%; */
    align-items:center;
    justify-content: space-around;
    border-bottom: 1px solid whitesmoke;
}

.header-middle {
    display:flex;
    flex:0.5;
    align-items: center;
    background-color: white;
    padding: 5px;
    margin-top: 10px;
    border-radius: 10px;
}

.header-middle > .MuiSvgIcon-root {
    color: grey;
    background: transparent;
}

.header-middle > input {
    border:none;
    width:100%;
    padding:10px;
    outline-width: 0;
    font-size: medium;
    background-color: white;
  }

Check out the GitHub repository for more information:GitHub Repository

htmlcssreactjs

Answer №1

when entering information, apply the following style:

input {
    border: none;
    outline: none;
}

Answer №2

Typically, there is a visible border around an input field when it is selected. To remove this border when the input is focused, you can include the following CSS code:

.header-middle > input:focus {
  outline: none;
}

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

Highlighting the menu items when hovering over them in an ASP menu

Recently, I have been working on my menu code and here is what I currently have: <td><a href="Products.asp?isnew=true"><img height="21" border="0" src="images/productmenu/new_items<%if request.querystring("isnew")="" then%><%else%& ...

asp.nethtmlmenu

ReactJS: Error - Attempting to convert an undefined or null value to an object is not

Encountering an issue with my Beach component, which is throwing the following error: TypeError: Cannot convert undefined or null to object ResortDetail C:/Users/JS/Desktop/MERN/KR/frontend/src/screens/Beach.js:33 30 | <p>{description}< ...

javascriptreactjs

Bootstrap's versatile footer positioning adaptation

I am working with a simple layout design: +----------+ | Header | +----------+ | | | Content | | | +----------+ | Footer | +----------+ My goal is to ensure that the footer is positioned: at the bottom of the viewport when there ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Guide on embedding styles within the shadow DOM of MUI material v5 in a React custom element using an insertion point

In the past, I successfully created a custom element using webpack and babel with @material-ui/core V4 (specifically 4.12.3). The styling for this custom element was done using @material-ui/core makeStyles. However, I am now upgrading to @mui/material v5 a ...

reactjsmaterial-uicustom-elementreact-typescript

Breaking the link from the image it is connected to using [middleman] css and html

My question is about an icon with a link attached to it. <%= link_to image_tag("infobutton_circle_blue.png") ,"http://redbullrecords.com/artist/awolnation/", :id => "about" %> After applying styles, the link may not work properly: <a id="abo ...

csshtmlsassmiddleman

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

cssextjscomboboxiconsfont-awesome

Add a prefix to every hyperlink in an HTML document

I'm looking to transfer an HTML template to a Google site using embedded code. The template includes a table with over 500 links that need to be prepended. Is there a method to achieve this without relying on JavaScript? <table class="wikitabl ...

htmlcss

Upon reloading, my flux store is reinitialzed

Hey there! I'm fairly new to React and I'm encountering a major issue that's been puzzling me. I haven't been able to find a solution that works for me. So, I've developed an application that displays a list of objects. At the mom ...

reactjsfluxreactjs-flux

Choosing the initial tab to display when the page loads from a selection of 3 tabs

How can I set the "All" tab to be selected by default when the page loads, with the text color black and underlined? .publisher-tab { background-color: rgb(255, 255, 255) !important; color: #B3B3B3; font-family: 'Open Sans'; font-style ...

htmlcss

Typescript Next.js Project with Custom Link Button Type Definition

I have a project that includes a custom Button component and a NextLink wrapper. I want to merge these two components for organization purposes, but when I combine the props for each, I encounter an issue with spreading the rest in the prop destructuring s ...

reactjstypescriptnext.js

Troubleshoot: Why is the Chrome Extension content script failing to prepend to the body

Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...

jquerycssgoogle-chrome-extension

"Error: Cannot iterate over items in React using Item.map, as

I am currently working on implementing a function to handle changes in the names of individuals within an array stored in state as personState. const [personState, setPersonState] = useState([ { id:'asdasd', name: "Max", age ...

javascriptreactjs

The JavaScript game's set interval function is failing to execute at consistent 10-second intervals

Trying to incorporate gravity into a circular object in an HTML, CSS, and JavaScript game. Here is the relevant JavaScript code section: Check out the code on repl.it: https://repl.it/join/wukcvzow-iamapersonthing The specific part of interest in this tu ...

javascripthtmlcsssetinterval

The spreading of personalized events

I am expecting my CustomEvent to be propagated from the document to all the DOM elements. However, for some unknown reason, it is not happening. Can you point out what mistake I might be making? <html> <script> function onLoad() { var myDi ...

javascripthtmldomevent-propagationcustom-event

Is the unregistered functional component not being recognized as a functional component?

I’m currently attempting to utilize the Materials useStyle feature in my TypeScript React application, but I’ve encountered a peculiar problem. // index.tsx import React from 'react'; import {render} from 'react-dom'; import {make ...

reactjsreact-hooksmaterial-ui

Retrieve the ID from the database and showcase the content on a separate page

My database has a table named "apartments," and I am using the following code to display its contents on a single page: $connect = mysqli_connect("localhost","root","","db_dice"); $query = "SELECT * FROM apartment ORDER BY ID DESC"; $records = mysqli_quer ...

phphtmlmysqldatabasepermalinks

Is it possible to convert the useMemo function into a useReducer hook implementation?

While I've figured out how to switch from using useState to useReducer, I'm now curious if there's a similar approach for transitioning from useMemo? I've been troubleshooting some code that's causing unnecessary renders because o ...

javascriptreactjsreact-native

Guide for releasing a typescript package compatible with both node and react applications

I have developed an authentication library in TypeScript which I have released on npm. My goal is to make this library compatible for use in both Node.js projects and React projects created with create-react-app. However, I am facing an issue where one of ...

node.jsreactjstypescriptcreate-react-appnpm-publish

The class "slick" in <col class="slick"> does not add any styling or effects

My interpretation of the col element is that it can be used to assign a class to all elements in a column of a table. However, I am experiencing difficulties with this approach. While I am able to apply the class to individual td elements, I am looking for ...

htmlcsshtml-tablecol

Resize all SVGs to a uniform height and align them in a single row within a flexbox container

My goal is to design a banner featuring various accepted payment icons. I aim to resize the images so that they all have the same height, which is the maximum height possible to fit all images in a single row. The images vary in size and aspect ratio, incl ...

htmlcsssvgflexbox