Remove the outline on a particular input and retain only its border

Question

Remove the outline on a particular input and retain only its border

Even after trying to use "outline: 0", nothing seems to change.

#input_field {
  outline: 0;
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

<div id="input_field">
  <input type="text" name="q" size="50">
</div>

I still require the outline for other inputs.

UPDATE:

.lucky_pos, .button_search_pos{    
    text-align: center;
    padding:1px;
    margin: 0;
    flex-direction: row;
}

As I only want the outline to be applied to #input_field and not others, here is a separate .css for the other elements. Thank you in advance!

html css outline

Answer 1

Answer №1

If you want to achieve a similar effect, try this code snippet:

Check out the fiddle for a demonstration.

#custom_input {
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

.NoOutline {
  border: none;
}

.NoOutline:focus {
  outline: 0;
}

<div id="custom_input">
  <input type="text" class="NoOutline" name="query" size="50">
</div>

Answer 2

If you want to achieve a similar effect, try this code snippet:

Check out the fiddle for a demonstration.

#custom_input {
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

.NoOutline {
  border: none;
}

.NoOutline:focus {
  outline: 0;
}

<div id="custom_input">
  <input type="text" class="NoOutline" name="query" size="50">
</div>

Answer 3

Answer №2

To get rid of the outline when the input is in focus, you can use the following CSS:

#input_field > input:focus {
   outline:none;
}

If you also want to remove the border (which can be misleading because it looks similar to an outline and remains visible even when focused), you can include this as well:

#input_field > input {
   border:none;
}

If you only want the border to appear when the input is in focus, you can try this approach:

#input_field > input {
   border:none;
}

#input_field > input:focus {
   border:1px solid #000;
}

Answer 4

To get rid of the outline when the input is in focus, you can use the following CSS:

#input_field > input:focus {
   outline:none;
}

If you also want to remove the border (which can be misleading because it looks similar to an outline and remains visible even when focused), you can include this as well:

#input_field > input {
   border:none;
}

If you only want the border to appear when the input is in focus, you can try this approach:

#input_field > input {
   border:none;
}

#input_field > input:focus {
   border:1px solid #000;
}

Answer 5

Answer №3

To achieve different focus states for input tags, you can assign unique classes or ids to them. The focus state is triggered when the input is clicked.

.input-custom:focus{
 outline: color type size;
} 

.input-alt:focus{
 outline: 0;
} 

<input class="input-custom"/> 
<input class="input-alt"/>

Answer 6

To achieve different focus states for input tags, you can assign unique classes or ids to them. The focus state is triggered when the input is clicked.

.input-custom:focus{
 outline: color type size;
} 

.input-alt:focus{
 outline: 0;
} 

<input class="input-custom"/> 
<input class="input-alt"/>

Remove the outline on a particular input and retain only its border

Answer №1

Answer №2

Answer №3

Similar questions

Creating a visual feast: A guide to crafting a stunning image gallery

What methods can be used to test scss subclasses within an Angular environment?

Stunning Bootstrap 4 landing page components stacking beautifully on one another

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

The car glides smoothly across the screen from left to right before disappearing from view

Left-aligned arrow for Material UI select dropdown

Which is the better approach for performance: querying on parent selectors or appending selectors to all children?

The use of absolute positioning in conjunction with overflow:hidden

Bug in Cascading Style Sheets affecting Internet Explorer version 6 and version 7

Triggering a targeted action upon the user's click on any HTML element

Vue.js enhances user input interactions

Arabic and Latin letters become intertwined

Achieve a stunning visual effect by placing images behind the background using HTML and

Unable to apply 3rd condition with ngClass into effect

Limiting the size of images within a specific section using CSS

Conceal the horizontal scrollbar when the navigation menu is minimized

Iphone not picking up media queries, while browser resize is working perfectly

Utilizing media queries and page width in a Moodle theme designed with Bootstrap framework

Transforming the mui stepper connection into a progress bar is simple. Each step contains individualized content to guide you through the process

Transitions fail to appear correctly when the page first loads