我正在尝试删除输入框的边框，但不确定在渲染时为什么它不起作用。我正在使用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中会更改文本的颜色，但是没有。我觉得我已经结束了看起来很明显的事情。
在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">
我创建了一个片段以向其他人显示该问题，而不是了解发生了什么。
这是第一个代码：
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>
<othertag type="text">
</input>
<input type="text">