英文:
How can i remove empty space around my ICON when i using FLEXBOX in CSS?
问题
当我使用flexbox时，如何去掉图标周围的蓝色背景色？
无法将子元素的属性一般化为其父元素。
我没有全局背景颜色。
我在FONTAWSOME.com网站上使用了图标。
* {
direction: ltr;
background-color: #55efc4;
box-sizing: border-box;
}
body {
font-size: 16px;
}
.container {
display: flex;
flex-direction: column;
background-color: white;
margin: 150px 500px;
}
.title {
font-size: 2em;
color: white;
background-color: #00b894;
border: 1px solid white;
padding: 20px;
justify-content: center;
align-items: center;
text-align: center;
}
.user {
background-color: white;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
margin: 10px;
padding: 10px;
align-self: center;
}
#usericon {
position: relative;
align-self: auto;
padding: 0px;
}
.userid {
position: relative;
background-color: white;
align-self: auto;
}
#idname {
position: relative;
align-self: center;
background-color: white;
border: none;
border-bottom: 2px solid #999;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#idname:focus {
outline: none;
border: none;
border-bottom: 2px solid #00b894;
-webkit-transition: 3s;
}
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<meta charset="UTF-8" />
<script src="https://kit.fontawesome.com/5dd6c7af4c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="container">
<div class="title">登录表单</div>
<div class="user">
<form class="userid" action="">
<label id="usericon" for="idname"><i class="fa-solid fa-user"></i></label>
<input type="text" name="idname" id="idname">
</form>
</div>
<div></div>
<div></div>
</div>
</body>
</html>
我的结果 我不想使用inline-flex。谢谢！
英文:
I'm a beginner, can anyone explain how can i remove that Blue background color around my icon when i'm using flexbox?
i can't generalization my properties for children to their parent.
i haven't no global BG color.
i used FONTAWSOME.com website for icons.
result
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
*{
direction: ltr;
background-color: #55efc4;
box-sizing: border-box;
}
body{
font-size: 16px;
}
.container{
display: flex;
flex-direction: column;
background-color: white;
margin: 150px 500px;
}
.title{
font-size: 2em;
color: white;
background-color: #00b894;
border: 1px solid white;
padding: 20px;
justify-content: center;
align-items:center;
text-align: center;
}
.user{
background-color: white;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
margin: 10px;
padding: 10px;
align-self: center;
}
#usericon{
position: relative;
align-self:auto;
padding: 0px;
}
.userid{
position: relative;
background-color: white;
align-self:auto;
}
#idname{
position: relative;
align-self: center;
background-color: white;
border: none;
border-bottom: 2px solid #999 ;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#idname:focus{
outline: none;
border: none;
border-bottom: 2px solid #00b894;
-webkit-transition: 3s;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>login</title>
<meta charset="UTF-8" />
<script src="https://kit.fontawesome.com/5dd6c7af4c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/main.css" >
</head>
<body>
<div class="container">
<div class="title">LOGIN FORM</div>
<div class="user">
<form class="userid" action="">
<label id="usericon" for="idname"><i class="fa-solid fa-user"></i></label>
<input type="text" name="idname" id="idname">
</form>
</div>
<div></div>
<div></div>
</div>
</body>
</html>
<!-- end snippet -->
my resaulti don't want to using inline-flex. THANKS
答案1
得分: 0
你可以尝试将#usericon{}添加background-color: white。
如果你有*{background-color: "cyan"}，它会使所有元素的背景变为青色，请查看你的CSS文件中是否有这个青色并找出原因。
英文:
you can try adding background-color: white to #usericon{}.
If you have *{background-color: "cyan"} it makes all the elements backgrounds cyan, look in your css where you have that cyan color and find the cause.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论