gpt4 book ai didi

css - 无法去除输入框边框

转载 作者:行者123 更新时间:2023-12-01 22:24:23 26 4
gpt4 key购买 nike

我正在尝试移除输入框的边框,但我不确定为什么在我渲染它时它不起作用。我正在使用 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>

我想在输入 CSS 中添加 color:red 会改变文本的颜色,但事实并非如此。我觉得我忽略了一些非常明显的东西。

最佳答案

在 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" 的 child ,或与此相同:

 <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=text], input[type=password]
{
border:none;
border-bottom: 1px solid lightgray;
}
<input type="text">

关于css - 无法去除输入框边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37167081/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com