时间戳

首页 > 解决方案 > CSS 搜索按钮样式被用户代理样式表覆盖

html - CSS 搜索按钮样式被用户代理样式表覆盖

问题描述

当下面的代码在任何浏览器中呈现时，用户代理样式表将覆盖我的 CSS 中用于搜索按钮的 form.example。该按钮看起来很小，并且与以前的输入框大小不同。我已经使用浏览器控制台确认了这一点。这很奇怪，因为相同的 CSS 已经工作了好几个月，而我没有改变任何东西。它突然停止工作。奇怪的是，当我在https://www.codeply.com/p中运行相同的代码时，它似乎可以正确呈现。

这是代码：

body {
  margin: 0;
  height: 100%;
  font-family: Courier New, monospace; color: white;
}

{
  box-sizing: border-box;
  font-family: Courier New, monospace; color: white;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the content */
.content {
  background-color: rgb(48, 10, 36);
  padding: 10px;
  height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
    border: 1px solid #333;

}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

/* Style the footer bar */
.footer {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the footer links */
.footer a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.footer a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the footer

 .footer {
  background-color: #333;
  padding: 10px;
  color: white;
}
*/
/* Style the search box */

input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;/* CSS for search file */
body {
  font-family: Courier New, monospace;
}
* {
  box-sizing: border-box;
}
form.example
  width: 80%;
  background: #f1f1f1;
}

}
table.example
  width: 100%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 30%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}
form.example button:hover {
  background: #0b7dda;
}
form.example::after {
  content: "";
  clear: both;
  display: table;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Ramster</title>
    <link rel="stylesheet" href="/static/index.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
  </head>

  <body>
    <div class="topnav">
      <a href="home">Home</a>
      <a href="search">Leagues</a>
      <a href="teams">Teams</a>
      <a href="insert">Players</a>
    </div>

    <div class="content">
      <h2>Ramster</h2>
      <p>A place to play</p>
      <form class="example" method="post" action="" style="margin:left;max-width:600px">
        <input type="text" placeholder="Search by team or player" name="name">
        <button type="submit">Search</button>
      </form>
      <p></p>
    </div>
    <div class="content">
      <table class="example">
        <thead>
          <tr>
            <th colspan="1">Name</th>
            <th colspan="1">Position</th>
            <th colspan="1">Team</th>
            <th colspan="1">Buy</th>
          </tr>
        </thead>
        {% for item in data %}
        <tbody>
          <tr>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
            <td>{{item[3]}}</td>
            <td><a href="getPlayer?playerid={{item[0]}}" style="color:#E95420">Buy</a></td>
            {% endfor %}
          </tr>
        </tbody>
      </table>
    </div>
    <div class="topnav">
      <a href="showLogin">Login</a>
      <a href="showRegister">Register</a>
      <a href="logout">Logout</a>
    </div>

  </body>

</html>

标签： htmlcss

解决方案

你错过了{in form.example 并且}在它之后得到了一个关闭。因此它缺少input[type=text] {

应该管用：

form.example {
  width: 80%;
  background: #f1f1f1;
}

input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;/* CSS for search file */
 }

JSFiddle

或者 

body {
  margin: 0;
  height: 100%;
  font-family: Courier New, monospace; color: white;
}

{
  box-sizing: border-box;
  font-family: Courier New, monospace; color: white;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the content */
.content {
  background-color: rgb(48, 10, 36);
  padding: 10px;
  height: 100%; /*Should be removed. Only for demonstration */
}
table,
td {
    border: 1px solid #333;

}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

/* Style the footer bar */
.footer {
  overflow: hidden;
  background-color: #333;
  font-family: Courier New, monospace;
}

/* Style the footer links */
.footer a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.footer a:hover {
  background-color: rgb(48, 10, 36);
  color: black;
}

/* Style the footer

 .footer {
  background-color: #333;
  padding: 10px;
  color: white;
}
*/
/* Style the search box */

input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;/* CSS for search file */
 }
  
body {
  font-family: Courier New, monospace;
}

* {
  box-sizing: border-box;
}

form.example {
  width: 80%;
  background: #f1f1f1;
}


table.example {
  width: 100%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 30%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}
form.example::after {
  content: "";
  clear: both;
  display: table;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Ramster</title>
    <link rel="stylesheet" href="/static/index.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, height=100%">
</head>

<body>
    <div class="topnav">
        <a href="home">Home</a>
        <a href="search">Leagues</a>
        <a href="teams">Teams</a>
        <a href="insert">Players</a>
    </div>

    <div class="content">
        <h2>Ramster</h2>
        <p>A place to play</p>
        <form class="example" method="post" action="" style="display:inline;">
            <input type="text" placeholder="Search by team or player" name="name">
                    <button type="submit">Search</button>
                </form>
                <p></p>
    </div>
    <div class="content">
            <table class="example">
                    <thead>
                        <tr>
                            <th colspan="1">Name</th>
                            <th colspan="1">Position</th>
                            <th colspan="1">Team</th>
                            <th colspan="1">Buy</th>
                        </tr>
                    </thead>
                    {% for item in data %}
                    <tbody>
                        <tr>
                            <td>{{item[1]}}</td>
                            <td>{{item[2]}}</td>
                            <td>{{item[3]}}</td>
                            <td><a href="getPlayer?playerid={{item[0]}}" style="color:#E95420">Buy</a></td>
                    {% endfor %}
                        </tr>
                    </tbody>
                </table>
    </div>
    <div class="topnav">
        <a href="showLogin">Login</a>
        <a href="showRegister">Register</a>
        <a href="logout">Logout</a>
    </div>

</body>

</html>

推荐阅读