admin管理员组文章数量:1324842
I'm a beginner coder, and I'm currently creating a website as a personal project. I was going smoothly, but then suddenly an unexpected output happened and I stopped at my tracks. I have just added all code that I believe relevant.
Issue: the grid and everything inside acts as a pop-up. The gridAEP acts as a popup on top of the initial pop-up. I was trying to add some input boxes, and I already had a design which I was using elsewhere in the project. But when I added the class input-box to the input, unexpected outputs occurred.
The placeholder text is orange+purple (should only apply to labels) and so is the user input text. I wanted the placeholder and user input text to be plain white. But most of all, the real problem is that when hovered, both placeholder text and user input text just disappears, as in becomes invisible, even though it's there (verified by selecting text).
Expected output: I was expecting it to behave as normal. The background should be the colour it is, but the placeholder should be white and the text input by user should be white as well. Also, the text shouldn't become invisible when hovered.
I have tested the below code in a code tester and the issue still persists. Here is all the relevant CSS and HTML markup:
label {
display: block;
font-family: 'Raleway', sans-serif;
font-weight: 600;
background: linear-gradient(45deg, #ff7e5f, #6a5acd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 5px;
}
.input-box {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 10px;
padding: 10px;
color: white;
font-size: 14px;
margin-bottom: 10px;
transition: transform 0.3s, box-shadow 0.3s;
}
.input-box:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255, 126, 95, 0.8);
}
/* Element container */
.grid {
display: grid;
gap: 20px;
padding: 0 10px; /* Ensure spacing inside the border */
z-index: 1020;
}
#addElementPopup {
width: 750px; /* Smaller size */
height: 550px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background: black;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
gap: 20px;
z-index: 1001;
border-radius: 20px;
z-index: 1010;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script src=""></script>
</head>
<body>
<div" id="addElementOverlay">
<div id="addElementPopup" class="hidden">
<div id="gridAEP" class="grid">
<label>Input 1<input type="text" placeholder="Enter name here" class="input-box w-full" /></label>
<label>Input 2<input type="number" placeholder="Enter tier here (1-5)" class="input-box w-full"/></label>
<label>Input 3(Optional)<input type="text" placeholder="Enter emoji representing name" class="input-box w-full"/></label>
</div>
</div>
</div>
</body>
</html>I'm a beginner coder, and I'm currently creating a website as a personal project. I was going smoothly, but then suddenly an unexpected output happened and I stopped at my tracks. I have just added all code that I believe relevant.
Issue: the grid and everything inside acts as a pop-up. The gridAEP acts as a popup on top of the initial pop-up. I was trying to add some input boxes, and I already had a design which I was using elsewhere in the project. But when I added the class input-box to the input, unexpected outputs occurred.
The placeholder text is orange+purple (should only apply to labels) and so is the user input text. I wanted the placeholder and user input text to be plain white. But most of all, the real problem is that when hovered, both placeholder text and user input text just disappears, as in becomes invisible, even though it's there (verified by selecting text).
Expected output: I was expecting it to behave as normal. The background should be the colour it is, but the placeholder should be white and the text input by user should be white as well. Also, the text shouldn't become invisible when hovered.
I have tested the below code in a code tester and the issue still persists. Here is all the relevant CSS and HTML markup:
label {
display: block;
font-family: 'Raleway', sans-serif;
font-weight: 600;
background: linear-gradient(45deg, #ff7e5f, #6a5acd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 5px;
}
.input-box {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 10px;
padding: 10px;
color: white;
font-size: 14px;
margin-bottom: 10px;
transition: transform 0.3s, box-shadow 0.3s;
}
.input-box:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255, 126, 95, 0.8);
}
/* Element container */
.grid {
display: grid;
gap: 20px;
padding: 0 10px; /* Ensure spacing inside the border */
z-index: 1020;
}
#addElementPopup {
width: 750px; /* Smaller size */
height: 550px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background: black;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
gap: 20px;
z-index: 1001;
border-radius: 20px;
z-index: 1010;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script src="https://cdn.tailwindcss"></script>
</head>
<body>
<div" id="addElementOverlay">
<div id="addElementPopup" class="hidden">
<div id="gridAEP" class="grid">
<label>Input 1<input type="text" placeholder="Enter name here" class="input-box w-full" /></label>
<label>Input 2<input type="number" placeholder="Enter tier here (1-5)" class="input-box w-full"/></label>
<label>Input 3(Optional)<input type="text" placeholder="Enter emoji representing name" class="input-box w-full"/></label>
</div>
</div>
</div>
</body>
</html>3 Answers
Reset to default 2The issue you're facing is likely due to the label tag wrapping the input field. To fix the issue and achieve the expected output, I recommend separating the label and input tags. Here's an example where I’ve placed each label and input inside their own div container for better layout control
<div id="gridAEP" class="grid">
<div>
<label>Input 1</label>
<input
type="text"
placeholder="Enter name here"
class="input-box w-full"
/>
</div>
<div>
<label>Input 2</label>
<input
type="number"
placeholder="Enter tier here (1-5)"
class="input-box w-full"
/>
</div>
<div>
<label>Input 3(Optional)</label>
<input
type="text"
placeholder="Enter emoji representing name"
class="input-box w-full"
/>
</div>
</div>
The issue you're facing seems to be related to the way the input-box class is applying styles that are affecting both the placeholder and the user input text. Specifically, the -webkit-background-clip: text; and -webkit-text-fill-color: transparent; properties, which are being applied to the label, might also be affecting the input fields.
To resolve the issue, you should modify the styles specifically for the placeholder and user input text
The issue you are facing is due to various reasons, and there's some beginner mistakes you are doing which I think you can improve.
I would recommend not to use -webkit-background-clip: text because this is experimental and it's not supported in some browsers. The other thing is when you are using Tailwind CSS, and go all out with it, it will improve your mastery over Tailwind. In your code, it is advisable never to warp label inside of input, although it will help when the user presses on the label input field get focused. The problem you are facing is because of these two CSS lines:
-webkit-background-clip: text, -webkit-text-fill-color transparent;`
Here you will see that you already set background clip to text and its color to transparent. I slightly improved this, and I think you will get your satisfactory result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script src="https://cdn.tailwindcss"></script>
<style>
label {
display: block;
font-family: 'Raleway', sans-serif;
font-weight: 600;
background: linear-gradient(45deg, #ff7e5f, #6a5acd);
-webkit-background-clip: text;
-webkit-text-fill-color: white;
margin-bottom: 5px;
}
span {
-webkit-text-fill-color:transparent;
}
.input-box {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 10px;
color: white;
font-size: 14px;
margin-bottom: 10px;
transition: transform 0.3s, box-shadow 0.3s;
}
.input-box:hover {
/* transform: scale(1.05); */
box-shadow: 0 0 10px rgba(255, 126, 95, 0.8);
}
/* Element container */
.grid {
display: grid;
gap: 20px;
padding: 0 10px; /* Ensure spacing inside the border */
z-index: 1020;
}
#addElementPopup {
width: 750px; /* Smaller size */
height: 550px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background: black;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
gap: 20px;
z-index: 1001;
border-radius: 20px;
z-index: 1010;
}
</style>
</head>
<body>
<div" id="addElementOverlay">
<div id="addElementPopup" class="hidden">
<div id="gridAEP" class="grid">
<label>
<span>Input 1</span>
<input type="text" placeholder="Enter name here" class="input-box w-full" />
</label>
<label>
<span>Input 2</span>
<input type="number" placeholder="Enter tier here (1-5)" class="input-box w-full"/>
</label>
<label>
<span>Input 3(Optional)</span>
<input type="text" placeholder="Enter emoji representing name" class="input-box w-full"/>
</label>
</div>
</div>
</div>
</body>
</html>本文标签： overridingExpected outcome is not appearing because of some kind of CSS overiddanceStack Overflow
版权声明：本文标题：overriding - Expected outcome is not appearing because of some kind of CSS overiddance - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742121670a2421736.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论