In the snippet attached the input field has red background. Try entering saved data and its background will default to light bluish color. How can I stop it from defaulting to sky blue while maintaining the functionality of entering saved data?
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<input name="title" id="title" type="text" placeholder="Enter a title here." class="focus:border-transparent focus:ring-0 ring-0 border-transparent focus:border-red-300 required:border-red-500 invalid:border-red-500 p-2 sm:p-4 w-full text-xl sm:text-2xl mt-2 shadow-md bg-red-400 placeholder-white transition-all">
As stated here: https://stackoverflow.com/a/14205976/21232878 by Fareed
you can do it by setting inset box-shadow with no blur
so in your case, add this to your CSS
/* Change the input to any CSS selector you like */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 40px rgb(30 41 59/var(--tw-bg-opacity inset !important;
}
Related
When focussing on my <input>, the text seems to get thinner.. It only seems to happen when the background-color is dark in combination with a few specific text colors.
<body style="background-color: black">
<input type="text" />
<span style="color: blue">TESTANDO</span>
</body>
Input without focus:
Input with focus:
Changing the font or setting a font weight doesn't have any effect on this problem.
You can prevent this by removing the outline when the input is focused input:focus {outline: 0}.
input:focus {outline: 0}
<body style="background-color: black">
<input type="text" />
<span style="color: blue">TESTANDO</span>
</body>
If you want the outline, add it back with box-shadow
box-shadow: 0px 0px 0px 0.5px #fff; border-radius: 3px;
Here is my code in input.tsx
<input type="text" placeholder="Email" class="h-12 px-4 w-full h-12 px-4 placeholder-gray-500 border border-transparent rounded outline-none transition duration-200 text-gray-900 bg-gray-f7 hover:border-gray-400 focus:border-black focus:placeholder-gray-900 mb-10px bg-gray-100 " id="emailAddress" autocomplete="off" name="emailAddress" value="">
"onFocus" blue outline is coming on my UAT (not in localhost);
i.e:
input[type=text]:focus {
outline: 2px solid #2d8cff !important;
outline-offset: 1px !important;
}
I have overrided this CSS with outline:none !important; but CSS is not appearing on UAT server.
Check the css specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There might be some other parent element which is causing this.
Removing outline
How to remove focus border (outline) around text/input boxes? (Chrome)
How to remove the border highlight on an input text element
I'm designing a popup element with a p-button. I've tried background colour using styleClass="p-button-secondary", but it seems it's not like dark black. I also tried external css, but I could not set the background colour I expected.
My HTML Code :
<p-button styleClass="p-button-secondary prime-button-black" style="background: #161b2900;"
class="ml-3 mb-4 mt-0 prime-button-black" (click)="st.toggle($event)">
<mat-icon class="bg-white text-black rounded-full mr-4" [icIcon]="icAdd"></mat-icon>
<span>Create System Type</span>
</p-button>
My external Css :
.p-button .prime-button-black {
background-color:#161b2900 !important;
}
Change the css selector to p-button and provide a valid and visible color hex. You have provided eight value hex color i.e. 161b2900 where last two digits are alpha component, indicating its transparency. 0 represents a fully transparent color and ff is for complete opaque. In your case 00 is making the background color completely transparent.
p-button{
background-color: #161b2944 !important;
}
<html>
<head>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body>
<p-button styleClass="p-button-secondary prime-button-black" style="background: #161b2900;" class="ml-3 mb-4 mt-0 prime-button-black" (click)="st.toggle($event)">
<mat-icon class="bg-white text-black rounded-full mr-4" [icIcon]="icAdd"></mat-icon>
<span>Create System Type</span>
</p-button>
</body>
</html>
I want to change the position of placeholder text's position like margin-left: 10px and padding-left: 4px in Tailwind CSS.
<input type="text" name="name" placeholder="পুরাতন পাসওয়ার্ড দিন" className=" placeholder-gray-500 placeholder-py-4 bg-red-400 focus:outline-none border rounded-xl h-12 w-160" />
You can style the placeholder using the Tailwind placeholder: pseudo-class (see: https://tailwindcss.com/docs/hover-focus-and-other-states#placeholder-text ).
However, padding and margin settings don't seem to work directly on the placeholder even though classes like placeholder:text-gray-500 will be applied. You could instead pad the input field (pl-[14px]), which is usually more appropriate since user-entered text will replace the placeholder.
<input className="placeholder:text-gray-500 pl-[14px] focus:outline-none border border-gray-500 rounded-xl h-12 w-160" type="text" name="name" placeholder="পুরাতন পাসওয়ার্ড দিন" />
You can see and tweak a working example here: https://play.tailwindcss.com/v7HJ30jXga
Try this
#layer utilities {
.placeholder-style::placeholder {
padding: 5px 12px;
margin: 5px;
}
}
<input type="text" class="placeholder-style" />
I'm using the custom forms of Bootstrap 4 on a website and while clicking there is a weird light-blue background behind the indicator (see BS 4 documentation or picture).
I now played around with my web console and tried different things to get rid of that background, but didn't manage.
I know that the background is on the focus of the actual input, which is set to display none... I have tried adding different styles to the label and/or the input, such as box-shadow: none; outline: none; background-color: transparent; etc. but neither of them worked.
This is why I'm searching for a solution here on StackOverflow. I hope, that someone can help.
Normal unchecked custom checkbox of BS 4
The weird light-blue background appearing from nowhere on focus
The checked custom checkbox of BS 4
Here is something :
Bootply : https://www.bootply.com/s82twl3iDl
CSS :
.custom-control-input~.custom-control-indicator{
background-color: grey !important; // select the background color
}
.custom-control-input:focus~.custom-control-indicator{
box-shadow: none !important;
}
HTML :
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
One of Bootstrap's styles is
.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#b3d7ff}
So if you don't want that, if you want it to have the same color as in the not active stage, just change it back to #ddd.
body .custom-control-input:active~.custom-control-indicator {background-color:#ddd}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
(Note: I had to add body in front of my selector to make the specificity higher, because the link to Bootstrap is included below the snippet styles.
Normally this wouldn't be necessary, since Bootstrap is normally included before your own styles.)
CSS
.custom-control-input:active~.custom-control-label::before {
background-color: #dee2e6;
}
The blue background appears on active.
On focus, a blue border appears. You can set the color to whatever you want. You can use the following code (below) to remove the blue border.
.custom-control-input:focus~.custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(222,226,230, .5);
}
HTML
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rememberMe"
name="rememberMe">
<label class="custom-control-label" for="rememberMe">Remember me</label>
</div>