With Tailwind CSS, my textarea's focus shows fine on the top, but it is cut off on the sides of the element:
These are the styles currently applied to the element:
.dark .dark\:text-slate-200 {
--tw-text-opacity: 1;
color: rgb(226 232 240/var(--tw-text-opacity));
}
.dark .dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39/var(--tw-bg-opacity));
}
.dark .dark\:border-gray-600 {
--tw-border-opacity: 1;
border-color: rgb(75 85 99/var(--tw-border-opacity));
}
.focus\:ring-theme-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(237 165 166/var(--tw-ring-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
textarea:focus {
--tw-ring-inset: var(--tw-empty, );
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
border-color: #2563eb;
box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px;
}
I have tried adding overflow-x: visible to every element in the DOM tree down to the textarea, but that did not have any effect.
A demo is available here, it only works in dark mode so toggle the switch on the nav bar.
Related
I am currently using angular material in my project and I have been asked to move input labels.
Currently when you start typing in an input, they move so the middle of the label is on the input top border.
I need to move them to just above the top of the input.
Here is an example of what it currently looks like:
I tried to fix this myself by adding this sass:
.mat-form-field-appearance-outline {
.mat-form-field-outline-start,
.mat-form-field-outline-end,
.mat-form-field-outline-gap {
border: 2px solid currentColor !important;
}
.mat-form-field-outline-gap {
border-left: none !important;
border-right: none !important;
}
.mat-form-field-outline-start {
border-radius: 25px 0 0 25px !important;
border-right: none !important;
}
.mat-form-field-outline-end {
border-radius: 0 25px 25px 0 !important;
border-left: none !important;
}
.mat-form-field-wrapper {
margin: 0 !important;
}
.mat-form-field-flex {
// This padding centers the text
padding: 2.75px 25px !important;
}
.mat-form-field-infix,
.mat-form-field-label-wrapper {
border-top: 5px solid transparent;
}
.mat-form-field-outline {
color: $off-white;
background-color: $off-white;
border-radius: 25px;
}
&.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
color: $warm-red; // TODO: Add the theming
}
&.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
&.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-30px) scale(0.75);
}
}
.mat-form-field-label-wrapper {
padding-top: 10px;
}
It's only these lines that actually move the label:
.mat-form-field-appearance-outline {
&.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
&.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-30px) scale(0.75);
}
}
.mat-form-field-label-wrapper {
padding-top: 10px;
}
But I want you to see the rest of the formatting we use.
The problem with my solution is that the text gets cut off:
Does anyone know how to fix this?
In my case (Angular Material 11.0.0) it is a working solution:
.mat-form-field-label-wrapper {
transform: translateY(-20px) !important;
}
.mat-form-field-label {
transform: translateY(-20px) !important;
}
edit: missing }
I have a box shadow that's the same color as the element next to it, and I'm using a CSS transition to fade in both of them. The css transition for box-shadows and background-color is identical so I don't understand why they appear to fade in at a different rate.
Here a jsfiddle to reproduce the issue, and here is the relevant SCSS:
.right-of-blue {
box-shadow: 8px 0 transparent;
}
.outline, .background {
border-color: transparent;
background-color: transparent;
}
// Clicking the button toggles this class on the wrapper div
.colors-enabled {
.should-animate {
transition:
background-color .5s,
box-shadow .5s,
border-color .5s;
}
.outline {
border-width: 1px 2px;
margin: 0 -2px;
background: none !important;
border-style: solid;
}
.background {
border-width: 1px;
margin: 0 -1px;
border-style: solid;
}
.red {
border-color: $red;
background-color: $red;
}
.blue {
border-color: $blue;
background-color: $blue;
}
.right-of-blue {
box-shadow: 8px 0 $blue;
// Bump the outline/background of the next segment over to make room for the box shadow
& + span.outline {
margin-left: 0;
// Bump the text inside back to keep it from moving
& > span > span {
margin-left: -2px;
}
}
}
}
Seems to me that it's not because of different rates. you feel it this way because when the opacity of the blue background is for example 0.25, its 0.25 for the shadow too. so the overlap of two 0.25 in opacity make you feel it 0.5;
I changed your fiddle to avoid the overlap and I removed the border colors which overlap too. you can see the rate dont feel as before.
.right-of-blue {
box-shadow: 0 8px transparent;
}
check here:
https://jsfiddle.net/ahmadm/kxyua0dj/
I am trying to extend Bootstrap. I do not want to touch any of the Bootstrap core files, so I have created my own styles.scss and in there I have the following:
#import "custom/variables";
#import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
#import "custom/modular-styles";
In _variables.scss I am overwriting some of the variables (e.g. getting rid of rounded corners).
In _modular-styles.scss I call various other SASS partials that I want to customise (e.g. _forms.scss).
In _forms.scss here is what I've done:
.form-control {
display: block;
width: 100%;
height: $input-height-base;
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
background-color: $input-bg;
background-image: none;
border: 1px solid $input-border;
border-radius: $input-border-radius;
box-shadow: none; // this use to be #include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
#include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
outline: none; // this use to be #include form-control-focus;
#include placeholder;
&::-ms-expand {
border: 0;
background-color: transparent;
}
&:focus {
outline: none;
}
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: $input-bg-disabled;
opacity: 1;
}
&[disabled],
fieldset[disabled] & {
cursor: $cursor-disabled;
}
}
Shouldn't that work? Yet I am still seeing the outline glow when an input is on :focus
The glow on focus in Bootstrap is given by a box-shadow on :focus, like this:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
If you want to modify your focus styles add sth like this:
.form-control {
&:focus {
box-shadow: none;
/* your new styles */
}
}
You can do it by overriding the sass variables:
$input-box-shadow: none;
$input-focus-box-shadow: none;
$input-btn-focus-box-shadow: none;
And in case that doesn't do the trick (I've seen some weird behaviors with files ordering):
.form-control {
&:focus {
box-shadow: none !important;
}
}
Just a hint, but make sure you've imported Bootstrap only once. Once I had forgotten to remove it from my angular.json (former angular-cli.json) and that caused conflicts.
From what I recall, you need to override the outline in the :focus pseudo class, not just the main css class
.form-control {
...
&:focus {
outline: none;
}
}
See: How to remove the border highlight on an input text element
Try adding the following CSS:
textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
Try adding the following css
.form-control:focus {
box-shadow: none;
}
Explanation: In Bootstrap, the value of box-shadow changed when the input tag is focused, so the transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out worked.
Hope it helps.
the element that won't change is in this page (http://www.animefansftw.org/community/threads/fate-kaleid-liner-prisma%E2%98%86illya-3rei.641/add-reply)
the code that doesn't seem to take effect is
body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
{
background: blue !important;
}
my real questunion is why it doesn't work & how to make it work
my Style(FF v47.0.1)
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("animefansftw.org")
{
a:link{color: #b7e2fb !important;}
a:visited{color: #1eadff !important;}
a:hover{color: green !important;}
a:active{color: red !important;}
*, body, #content-wrapper, #footer-widgets,
single-post,.discussionList .discussionListItem.sticky .posterAvatar,
.discussionList .discussionListItem.sticky .stats,
.discussionList.discussionListItem.moderated .listBlock,
.discussionListItem.InlineModChecked .posterAvatar,
.discussionListItem.InlineModChecked .main,
.discussionListItem.InlineModChecked .stats,
.discussionListItem.InlineModChecked .lastPost,
.discussionListItem.moderated.InlineModChecked,
.discussionListItem.deleted .posterAvatar
{
background: black;
color: white !important;
}
.footer-widgets-border-left, #DiscussionListOptionsHandle a
{
background: #00004d;
}
.footer-widgets-border-right
{
background: #000080;
}
img[alt="default"]
{
-webkit-filter: invert(100%);
filter: invert(100%);
}
.cat-list li.ep-title:hover
{
background: gray !important;
border-left: 5px solid #f5f211;
border-right: 5px solid #1143f2;
}
li.ep-title
{
margin: 0 !important;
background: black !important;
border-bottom: 3px solid #00004d;
border-left: 0px solid transparent !important;
border-right: 0px solid transparent !important;
}
.dl-box
{
background: black;
border: 1px solid black;
box-shadow: -10px -10px 5px 0px #00004d;
}
.dl-title
{
background: -moz-linear-gradient(45deg, #00004d, blue, blue, #00004d);
}
.post-date .date, #social-wrapper, #nav, h3.newanimetitle,
#footer-bottom, .hasFlexbox .nodeList .categoryStrip,
.hasFlexbox .sidebar .visitorPanel .secondaryContent,
.sidebar .section .secondaryContent,
.threadListSeparator,.discussionList .sectionFooter
{
background: -moz-linear-gradient(top, #00004d, #000080, #000080, #00004d) no-repeat !important;
}
.dl-item
{
background: #1a1a1a;
}
#header-bottom
{
float: left;
background: url("http://puu.sh/2b5au.jpeg") #000000 !important;
width: 980px;
height: 165px;
}
#respond textarea
{
font-family: "Times New Roman", Times, serif;
font-size: large !important;
background: #00001a !important;
border: 1px solid #00004d !important;
}
.nodeList .node.level_1
{
background: #00001a !important;
box-shadow: 1px 2px 3px #00001a;
}
.nodeList .categoryStrip
{
border-top: 2px solid blue;
}
.hasFlexbox .node.level_2 .nodeInfo, .visitorPanel .stats dl,
.blendedEditor .redactor_box .redactor_toolbar
{
background: 0;
}
.hasFlexbox .message .messageUserInfo
{
background: #00001a !important;
}
div[style="background: #eeeeee; width: 620px; margin: 0 auto; padding:15px; font: 10pt italic; border: 1px solid #333333;"],
.message .dark_postrating.likesSummary, .dark_postrating
{
background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
}
.quickReply,.mainContainer .mainContent, .mainContainer_noSidebar
{
background: #00001a;
border-top: 2px solid #000080;
}
.blendedEditor .redactor_box .redactor_toolbar, .messageList .message
{
border-top: 2px solid #000080;
}
body[style="overflow-y: hidden; min-height: 99px;"],
.submitUnit .button, .redactor_toolbar
{
background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
}
element, body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
{
background: blue !important;
}
}
Remember the basic rule of css hierarchy for implication and importance:
Inline - highest importance
Internal
External
To my understanding of css, and Whatever I am able to get from your code is you have first implied a css property as !important to a parent element, and then might have used something on child.
Though remember it will not show its impact even on implying !important, as it is under that parent property. So, you need to write inline css for it, though not recommended.
e.g: if font-size is set as 15px!important to parent itself, then an inline css is used to change font-size of a child.
The best rule I follow is never imply !important property until it is the last possible solution. You can use better and unique names for your classes and ids, if you are worried it will get disturbed with some other piece of code.
I am working on this example and am seeking how to get rid of that blue outline for drop-down select button and the Search inbox inside the drop down menu. See this image:
I already tried:
.btn-default {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}
input, textarea, select, a { outline: none !important; }
input:focus, textarea:focus, select:focus{ outline: none; }
but they are not doing the trick.
Bootstrap form input elements do not use the outline property, but rather recreate it using box-shadow. You were on the right track with what you were doing, but the style that causes this is the following:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
You will want to override those styles with your own, setting the box-shadow to none and adjusting the border-color to match your default.
As for the select box, you can use the following style, as was originally mentioned by #kamlesh-kushwaha, to override the bootstrap setting:
.bootstrap-select .btn:focus {
outline: none !important;
}
For <select> dropdown, change in bootstrap-select.min line 29:
.bootstrap-select .dropdown-toggle:focus {
outline: thin dotted #333 !important;
outline: 5px auto -webkit-focus-ring-color !important;
outline-offset: -2px;}
to:
.bootstrap-select .dropdown-toggle:focus {
outline: none!important;
}
I remove bootstrap 4 dropdown-toggle 'on click' blue borders by doing this:
.yourdivname:focus {
box-shadow: none;
}
Anything else seemed to be irrelevant. For instance, with normal buttons {outline: none} always seemed to work, but not for this element. All that was needed was the box-shadow:none property.
Add the css focus rule or modify the existing one.
.bootstrap-select .btn:focus{outline:none!important;}
Similarly, you can add for select
You can use input[type] {}
All bootstrap input type as below
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(126, 239, 104, 0.8);
/* give your style */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6);
/* give your style */
outline: 0 none;
/* give your style */
}
select:focus {
outline-color: transparent;
}
Bootstrap or not, you can remove the the outline from a select tag with with:
select:focus {
box-shadow: none;
}