Question

我试图摆脱在搜索栏中写东西或至少更改它时显示的“ X”按钮：

<input type="search">

我尝试了以下CSS：

input[type="search"]{-webkit-appearance: none;}

和更多无法使用的webkit内容。

Answer 1

我尝试在Google搜索input type text remove close。我得到了这个结果。您可以使用以下代码在Chrome或Internet Explorer上将其删除。

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

<input type="search" />

我从Remove the X from Internet Explorer and Chrome input type search | Maxime Rouiller获得了上面的代码。

刚刚发现它可能与Remove IE10's "clear field" X button on certain inputs?重复

Answer 2

尝试以下CSS代码：

 /* clears the 'X' from Internet Explorer */
 input[type=search]::-ms-clear {  
 display: none; 
 width : 0; 
 height: 0; 
 }
 input[type=search]::-ms-reveal { 
 display: none; 
 width : 0; 
 height: 0; 
 }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { 
display: none; 
}

在link上查看更多信息

Answer 3

谢谢，这是完成这项工作的代码：

import React from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';

import './App.css';

function App() {
  function LoginOnClick(){
    document.getElementById("wrapper").innerHTML = <SignIn />;
  }
  return (
    <div className="container" id="wrapper">
      <button onClick={LoginOnClick}>Login</button>
      <Login />
    </div>
  );
}

export default App;

如何摆脱搜索栏上的“ X”

3 个答案: