Question

我正在尝试删除输入框的边框但我不确定为什么它在渲染时不起作用。我正在使用React.JS来呈现页面，但我认为这不是问题。

React.JS

    return (
        <div>
            <form className = "formPosition">
                <div className = "formTitle">Hello.</div>
                <div className = "formDescription">Please enter your username and password</div>
                <div className = "usernameFormat">
                    <input type = "text" placeholder = "Username"/><br/>
                </div>
                <div className = "passwordFormat">
                    <input type = "password" placeholder = "Password"/><br/>
                </div>
            </form>
        </div>
    );

输入框的CSS

input [type=text], input [type=password]
{
    border:none;
    border-bottom: 1px solid lightgray;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>

      <div id="page-body">

      </div>

  </body>

  <script src="javascripts/bundle.js"></script>

</html>

我想将color:red添加到输入CSS中会改变文本的颜色，但事实并非如此。我觉得我看起来很明显。

Answer 1

在CSS中，空格是重要的，可以改变一切。

你有：

input [type=text], input [type=password]
{
    border:none;
    border-bottom: 1px solid lightgray;
}

它应该是：

input[type=text], input[type=password]
{
    border:none;
    border-bottom: 1px solid lightgray;
}

第一个代码定位<input>，其中包含属性为type="text"的子项，或者与此相同：

 <input>
   <othertag type="text">
 </input>

第二个，定位<input>，其属性为type="text"：

 <input type="text">

修改

我创建了一个片段，向其他人展示问题，而不是了解会发生什么。

这是第一个代码：

＆＃13;

input [type=text], input [type=password]
{
  border:none;
  border-bottom: 1px solid lightgray;
}

＆＃13;

<input type="text">

＆＃13;

这是第二个代码：

＆＃13;

input[type=text], input[type=password]
{
  border:none;
  border-bottom: 1px solid lightgray;
}

＆＃13;

<input type="text">

＆＃13;

无法删除输入框边框

1 个答案:

修改