javascript - Cannot remove outline in input - Stack Overflow

admin管理员组

文章数量:1356227

import React, { useState } from 'react';
import "./styles/input.css";
import { CiSearch } from 'react-icons/ci';

interface SearchProps {
  isMobile: boolean;
  onSearch?: (query: string) => void;
}

const Search: React.FC<SearchProps> = ({ isMobile, onSearch = () => {} }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [isFocused, setIsFocused] = useState(false);

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(searchQuery);
  };

  const handleFocus = (e) => {
    setIsFocused(true);
    console.log('Focused');
  };

  const handleBlur = () => {
    setIsFocused(false);
    console.log('Blurred');
  };

  const borderClass = isFocused ? 'border-b-2 border-main_theme' : 'border-b border-gray-300';
//   console.log('Applied class:', borderClass);

  return (
    <form onSubmit={handleSearchSubmit} className="relative w-[350px] lg:w-[500px]">
      <div className={`flex items-center`}>
        
        <input
          type="text"
          placeholder="Поиск"
          className="w-full p-2 border-none"
          value={searchQuery}
          onChange={handleSearchChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
        <button
          type="submit"
          className="p-2 text-gray-400 focus:outline-hidden"
        >
          <CiSearch className="h-5 w-5" />
        </button>
      </div>
      <hr className={`${borderClass}`} />
    </form>
  );
};

export default Search;

This is my code, the problem occurs with an input element, tried to style it both with Tailwind CSS, inline styles and additional css as in example, but none of variants helped(additional styling for it below) -

input.css

input {
    outline: none; 
    border: none;  
    box-shadow: none; 
}

input:focus {
    outline: none; 
    border-bottom: none;
}

For some reason after all corrections and additions I get this result when focused(screen). Meanwhile I need to completely remove an outline while focused

import React, { useState } from 'react';
import "./styles/input.css";
import { CiSearch } from 'react-icons/ci';

interface SearchProps {
  isMobile: boolean;
  onSearch?: (query: string) => void;
}

const Search: React.FC<SearchProps> = ({ isMobile, onSearch = () => {} }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [isFocused, setIsFocused] = useState(false);

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(searchQuery);
  };

  const handleFocus = (e) => {
    setIsFocused(true);
    console.log('Focused');
  };

  const handleBlur = () => {
    setIsFocused(false);
    console.log('Blurred');
  };

  const borderClass = isFocused ? 'border-b-2 border-main_theme' : 'border-b border-gray-300';
//   console.log('Applied class:', borderClass);

  return (
    <form onSubmit={handleSearchSubmit} className="relative w-[350px] lg:w-[500px]">
      <div className={`flex items-center`}>
        
        <input
          type="text"
          placeholder="Поиск"
          className="w-full p-2 border-none"
          value={searchQuery}
          onChange={handleSearchChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
        <button
          type="submit"
          className="p-2 text-gray-400 focus:outline-hidden"
        >
          <CiSearch className="h-5 w-5" />
        </button>
      </div>
      <hr className={`${borderClass}`} />
    </form>
  );
};

export default Search;

This is my code, the problem occurs with an input element, tried to style it both with Tailwind CSS, inline styles and additional css as in example, but none of variants helped(additional styling for it below) -

input.css

input {
    outline: none; 
    border: none;  
    box-shadow: none; 
}

input:focus {
    outline: none; 
    border-bottom: none;
}

For some reason after all corrections and additions I get this result when focused(screen). Meanwhile I need to completely remove an outline while focused

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Mar 30 at 23:47 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Mar 30 at 23:34 bashlykov bashlykov 133 bronze badges 3

• Can't reproduce that appearance. Could be due to a browser extension – Phil Commented Mar 30 at 23:55
• Have you tried using !important? – Periplo Commented Mar 31 at 4:10
• Tried both in Opera and Edge, and everywhere I get this border. Upd: Tried "!important" now, it fixed the situaton at least in these both browsers. Thank you! –  bashlykov Commented Mar 31 at 8:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

input {
    outline: none !important; 
    border: none !important;  
    box-shadow: none !important; 
}

input:focus {
    outline: none !important; 
    border-bottom: none !important;
}

Such modification of module css file helped resolvnig the situation.

本文标签： javascriptCannot remove outline in inputStack Overflow