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;
Related
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>
I just getting started this google material design lite. And i found this textfield floating when you r focusing in this label. the color is blue or navy or idk.
the problem is, I changed the link color into this color indigo-pink
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
but there is no change for my textfield into an indigo color or a pink color when I focused on it.
question is simple, how to change it?
I did something with this, but still have no luck in it.
the HTML:
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample4">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
<label class="mdl-textfield__label mdl-color-modifier" for="sample4">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>
the css:
div .mdl-textfield__label:after {
background: pink;
}
.mdl-textfield--floating-label .is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
color:pink;
}
.mdl-color-modifier:focus{
color:pink;
}
I tried to apply a new class in it with pseudo :focus, but it still have no luck too.
I have it all. The keys are the :after modifier and the is-focused class. Just replace #FAFAFA with your indigo-pink and it should work for ya. This is just proof of concept. Check the fiddle. it has the text label colored too.
.mdl-textfield.is-focused .mdl-textfield__label {
color: #FAFAFA;
}
.mdl-textfield__label:after{
background-color: #FAFAFA;
}
https://jsfiddle.net/90u6Lxc4/30/
I believe an alternate solution would be like this, it worked for me:
.mdl-textfield__input:focus {
border-bottom-color: red;
box-shadow: 0 1px 0 0 red;
}
I deducted the answer from here.
I have a contenteditable text structure like so:
<div class="content" contenteditable="true">
<span contenteditable="false">
<span class="chunk" contenteditable="true">This sentence contains </span>
</span>
<span contenteditable="false">
<span class="chunk bold" contenteditable="true">some bold</span>
</span>
<span contenteditable="false">
<span class="chunk" contenteditable="true">text!</span>
</span>
</div>
This enables selecting text across all 3 "chunk" spans. However, removing the "outline" from it using css disables selecting text:
.chunk {
outline: 0px solid transparent;
}
Can anybody explain why? JSBIN example
EDIT
It's definitely the EXISTENCE of the outline that's causing the issue. Giving it a 1px solid transparent outline still allows text selection. As soon as you specify 0px, it prevents selection.
Within a div with a non-white background, when I add an input element it gives me this ugly border.
<div class="input-group">
<input type="search" style="height:30px;">
</div>
What can I do to get rid of it?
That is unusual... what browser are you using to view this? Do you have a source page you can show us? I'm wondering whether it's a browser-defined default, or you have some other CSS causing this.
Regardless, there is a simple answer to this: Set your own border.
Like so:
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey;">
</div>
You can also use this instead if you want iPhones to render the exact same border too (Apple devices like to style things their own way and this will override that):
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey; -webkit-appearance: none;">
</div>
I would still recommend posting a link to a real example (perhaps on jsfiddle.net), just so we can verify what's causing the border issue. There are several possible reasons, though the above code should solve the most common ones.
I have a form submit button, using that has a background image containing a 'pretty' styled version of the 'value' text.
I was hiding the html value text using:
text-indent: -9000px;
font-size: 0;
However, with image turned off (for accessibility testing) there is obviously no button text displayed.
Removing the above brings the value text back, but it overlays on top of the image.
How can I have the background image on top of the value text?
By first guess is some combination of <button><span></span></button> ?
What about using an img tag inside the button, and giving that an alt attribute:
HTML:
<button class="button">
<img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/>
</button>
CSS:
.button {
background: transparent;
border: 1px solid Black;
}
You could do something like this: <button>Your BTN Text<span class="img"> </span></button>
and in CSS:
button { position: relative;}
button span {
position: absolute;
text-indent: -9000px;
top:0;
left: 0;
right:0;
bottom:0;
background: url(yourimage.whatever);
}
so if us disable the images the text is still visible under the absolute element.
Make as value="" (empty):
<input type='submit' name="csubmit" value="" />
If you have multiple submit buttons and validating based on button clicked leave value with empty space:
<input type-"submit" name="csubmit1" value=" " />
<input type-"submit" name="csubmit2" value=" " />
<input type-"submit" name="csubmit3" value=" " />
Set the button's value to empty:
<input type="submit" value="" />
and you can remove the text-indent from your CSS.
This will obviously display no text whatsoever, but when you disable the CSS background, the button will still be visible.