What causes the presence of an additional outline in my HTML code and what steps can I take to eliminate it?

When I click on the input field, a second outline appears. How can I prevent the white portion from showing up? Initially, I used red for the outline color to ensure that I was writing the correct code. Based on my understanding of CSS, the white part should not be visible.

.Search-bar{  /*This is the component I need help with*/
height: 30px;
width: 300px;
border-radius: 15px;
border: none;
background-color: rgb(102, 102, 102);
text-align: center;
}
.Search-bar:hover{
width: 600px;
border: none;
}

.Search-bar:focus{
outline-color: red; /*I'm giving red to show contrast*/
}

.Navigation-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: rgb(49, 49, 49);
color: white;
box-shadow: 0px 2.98px 7.45px rgba(0,0,0,0.3);
}


.Nav-list {
display: flex;
flex-direction: row;
justify-content: space-around;
}
 
.Nav-list-title-button {
margin-left: 15px;
color: white;
border: none;
background: 100px;
height: 60px;
width: 160px;
font-size: larger;
}

.Nav-list-title-button:hover {
color: grey;
}
 
.Nav-list-button {
color: white;
margin: auto;
border: none;
background: 100px;
height: 50px;
width: 100px;
font-size: large;
}

.Nav-list-button:hover {
color: grey;
}
<nav className="Navigation-bar">
    <button className="Nav-list-title-button">Quests &#38; Fiction</button>
    <SearchBar />
    <div className="Nav-list">
        <button className="Nav-list-button">Log In</button>
        <button className="Nav-list-button">Register</button>
    </div>
</nav>

To view how it looks like, you can visit this link: https://i.sstatic.net/zMSJm.png

htmlcssborder

Answer №1

To eliminate the border around the input box, follow these steps.

.input-field {
  outline: none;
}
<input type="text" class="input-field" placeholder="Type here..">

Answer №2

It seems like the browser is highlighting the outline. Have you thought about using a border instead?

body {
  background: black;
}

.Search-bar {
  /*This is the component I need help with*/
  height: 30px;
  width: 300px;
  border-radius: 15px;
  background-color: rgb(102, 102, 102);
  text-align: center;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.Search-bar:hover {
  /* width: 600px; */
  /* border: none; */
}

.Search-bar:focus {
  outline: red;
  /*I'm giving red to show contrast*/
  border-color: red;
}

.Navigation-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(49, 49, 49);
  color: white;
  box-shadow: 0px 2.98px 7.45px rgba(0, 0, 0, 0.3);
}

.Nav-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.Nav-list-title-button {
  margin-left: 15px;
  color: white;
  border: none;
  background: 100px;
  height: 60px;
  width: 160px;
  font-size: larger;
}

.Nav-list-title-button:hover {
  color: grey;
}

.Nav-list-button {
  color: white;
  margin: auto;
  border: none;
  background: 100px;
  height: 50px;
  width: 100px;
  font-size: large;
}

.Nav-list-button:hover {
  color: grey;
}
<nav className="Navigation-bar">
  <button className="Nav-list-title-button">Quests &#38; Fiction</button>
  <div><input type="text" class="Search-bar"></div>
  <div className="Nav-list">
    <button className="Nav-list-button">Log In</button>
    <button className="Nav-list-button">Register</button>
  </div>
</nav>

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

Troubleshooting the Width Problem in Bootstrap 5 Dropdowns

I am currently working on a new project and encountering an issue with the width of a Bootstrap 5 dropdown. The problem lies in the discrepancy between the button width and the menu width. Although it may seem simple, I am having trouble resolving it as I ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Invoking a static method within a cshtml document

I am currently working on implementing a clickable DIV within a vertical tab panel. My goal is to have a specific static method called when the DIV is clicked. Here is what I have done: <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> ...

javascripthtml.netrazor

I am having trouble deactivating an HTML button using my JavaScript function

I have been working on a feature where a button in HTML is supposed to be disabled until a specific textbox is filled out. Once the textbox has content, the button should become enabled and save the user's name along with their score from a previous g ...

javascripthtml

A-Frame Visual Illumination

In my A-Frame AR scene, there is an image (transparent png) that can be moved and resized using gestures. My goal now is to adjust the brightness of this image based on the light estimated from the camera input. I have successfully implemented the light e ...

javascriptcssthree.jsaugmented-realityaframe

Creating a webpage header with Javascript to mimic an existing design

I am in the process of building a website with 5 different pages, but I want the header to remain consistent across all pages. To achieve this, I plan to use an external JavaScript file (.js). The header includes the website name (displayed as an image) an ...

javascripthtml

Images mysteriously vanishing after importing the Bootstrap stylesheet

One of the features on my website is a page where, upon hovering over an image, an overlay appears with a caption. Below is the code for one such image: <div id="content"> <div class="mosaic-block fade"> <a targe ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Angular ng-bind directive does not reflect changes in value updates

I am trying to dynamically update the content of a span element to reflect the current position of the element. The issue I am facing is that Angular does not update the value of the ng-bind attribute when I change the element's position. Here is my ...

javascriptjqueryhtmlangularjs

Having trouble with ng-click not correctly updating values within ng-repeat

Here is the code snippet: <div ng-repeat="data in products"> <div class=edit ng-click="dataUI.showEdit = true; content = data;"> </div> <div ng-repeat="renew in data.renewed"> <div class=edit ng-click="dataUI ...

javascripthtmlangularjs

What's the reason for switching from a custom tab icon to a React icon?

I've encountered a strange issue while working on my app - the tab icon keeps changing from the one I've set to the ReactJS icon whenever I navigate between different routes. I have linked the icon correctly in my HTML file, so I'm not sure ...

javascripthtmlvue.jsvuejs2

What is the best way to change the orientation of the Product List in WooCommerce to landscape

Is there a way to change our product list display to landscape orientation? The current portrait layout is not visually appealing due to excessive white space. I would greatly appreciate any guidance on how to resolve this issue. You can view our website ...

csswordpress

Generating nested arrays using Vue.js

Calculating the total costs of products selected by a user for each company is my current task. Below is the code snippet I am using: let companiesProductPrices = []; let prices = []; this.selectedCompaniesDetails.forEach ...

htmlvue.js

Vue: update data and trigger function upon completion of animation transformation, utilizing animation transformation completion listener

Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue https://i.stack.imgur.com/zboCb.png Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3 ...

javascripthtmlcssvue.jsvuejs3

Troubleshooting: Issue with CSS chaining adjacent sibling and :checked functionality

When I click the second radio button in Chrome, why does paragraph 2 stay highlighted and paragraph 4 doesn't get highlighted? Is this a bug with Chrome? HTML: <input type="radio" name="toggler" checked /> <p>Paragraph one</p> < ...

cssgoogle-chromecss-selectorspseudo-class

Flipping the Y axis in Kendo-UI

I'm attempting to customize the Y-axis values so that they range from 1 to 8000, with 8000 at the top and 1 at the bottom. function createChart() { $("#chart").kendoChart({ title: { ...

javascripthtmlkendo-ui

Assigning a JavaScript code block to execute exclusively on designated pages

I have implemented webpack to bundle all my .js files into one app.js, which is utilized across all pages in my project. However, I have encountered an issue where code intended for one page is impacting another page where it is not required. For example, ...

javascripthtmlwebpack

Steps to eliminate various file extensions using Htaccess and reroute URLs with file extensions

Recently, I have taken on the task of revamping a law firm's messy website. They have files with various extensions (html, php, txt) and some unconventional directory structuring (for example, one link directs to example.com/head-injuries/ which actua ...

phphtml.htaccesshttp-redirectfile-extension

What is the best way to programmatically select a checkbox that was created dynamically using jQuery?

I've been scouring the internet trying to find information on what I'm attempting to accomplish, but so far I haven't come across anything helpful. The issue I'm facing is with a form that has a section dynamically added using JavaScri ...

javascriptjqueryhtmlformsfrontend

Tips for hiding the window scrollbar and utilizing the freed-up space

I am currently working on a page that contains 2 vertically aligned divs. My goal is to always display the upper div to the user, while allowing for a scrollbar in the second div (which has a fixed height) as content expands. The issue I am facing is tha ...

javascriptcssxhtml

How to toggle Bootstrap 5 dropdowns with both click and hover functionality

I am currently working on a dropdown menu using HTML/CSS/JavaScript/jQuery and Bootstrap 5. The objective is to have the menu open/close both when hovered over and clicked on: When the mouse hovers over the dropdown element, the menu should open Once the ...

javascriptjquerycssbootstrap-5

Expand and collapse button for viewing more content

I need help figuring out how to display a list of 10 items on my website. I want to show only three items initially, with a "View More" button that, when clicked, will reveal the remaining items. The button should then change to "View Less" so users can ea ...

javascriptjqueryhtmlcssbootstrap-4