I have a simple input of type text:
<input matInput type="text" placeholder="{{placeholder}}" class="input-field"
[ngClass]="{'error': hasErrors}" [readonly]="isReadonly" [disabled]="isDisabled">
I've added this css rule for readonly state, using the read-only selectore:
.input-field {
&:read-only {
border-style: none;
}
}
And I have this, which is correct:
The problem is that when I click on the placeholder, the focus event adds the border:
I need to get rid of that border on focus, so using :focus selector I've tried setting border: none but it doesn't work. I've tried:
.input-field {
&:read-only,:focus {
border-style: none;
}
}
and
.input-field {
&:read-only {
border-style: none;
&:focus {
border-style:none;
}
}
}
but the border keeps appearing. I am using Chrome, but I've also tried Firefox and it doesn't work.
Add this to your focus:
{ outline-style: none; box-shadow: none; border-color: transparent; }
Related
I've put together this pen: https://codepen.io/NanoSpicer/pen/YzQgQVd
The idea is that using the sibling selector I want to style a certain element when the element before the one I want to style is focused.
It works great with input elements, but it fails miserably when using elements with contenteditable attribute:
.container,
form {
width: 30%;
display: flex;
flex-direction: column;
gap: 10px;
}
div[contenteditable="true"]::before {
text-color: gray;
opacity: 0.6;
content: attr(placeholder);
}
div[contenteditable="true"],
input {
/* remove system hightlighting*/
outline-style: none;
box-shadow: none;
min-height: 40px;
appearance: none;
border: 3px solid;
border-color: gray;
border-radius: 6px;
}
div[contenteditable="true"]:focus,
input:focus {
border-color: blue;
}
*:focus+* {
border-color: red;
}
<form>
<input placeholder="first" id="first" type="text">
<input placeholder="second" id="second" type="password">
</form>
<div class="container">
<div contenteditable="true" placeholder="first"></div>
<div contenteditable="true" placeholder="second"></div>
</div>
Note: Tested on Firefox and Chrome.
That is very strange. Probably a bug.
This workaround is good for Firefox and Chrome on PC. Didn't test other browsers / platforms.
[contenteditable]:focus + * {
border-color:green;
}
Just like you did for in the beginning of your CSS, be more specific to indicate you want to react with the contenteditable attribute.
By default, div are not editable, so not focusable, so you have to be a bit more specific with this.
To make this work, you should edit the last CSS property to add the second selector line like I wrote here :
*:focus + *,
div[contenteditable="true"]:focus + div {
border-color: red;
}
or if you want to make it more generic:
*:focus + *,
*[contenteditable="true"]:focus + * {
border-color: red;
}
I wonder if it is possible to style just focus on tab (using ↹ to navigate through the page)but not if the user click on the item.
Just like the default behaviour of checkboxes. It gets a blue outline (looks like box-shadow) if I use tab.
Like I want a new red box-shadow/outline on focus by tab but not if the user clicks on the checkbox.
<input id="checkBox" type="checkbox">
you can do it by Jquery
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('#checkBox').addClass('outline');
}
});
document.addEventListener('click', function(e) {
$('#checkBox').removeClass('outline');
});
.outline{
box-shadow: 2px 2px 2px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkBox" type="checkbox">
OR
this plugin:https://github.com/ten1seven/track-focus
in css:
body[data-whatinput="keyboard"] #checkBox:focus {
box-shadow: 0 0 5px red;
}
Focus will be when you're holding the mouse down on it. If you don't want it when clicked you can use hover instead.
input:hover {
box-shadow: 2px 2px 2px rgba(255,0,0,.5);
}
input:checked {
box-shadow: none;
}
<input id="checkBox" type="checkbox">
You can also create your own styling by styling the label. check this out https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
You could style all possible states of the checkbox:
input:focus {
box-shadow: 2px 2px 2px rgba(255,0,0,.5);
}
input:checked {
box-shadow: none;
/* HIDE OUTLINE - ACCESSIBILITY BAD PRACTICE */
outline: none;
}
<input id="checkBox" type="checkbox">
Using the solution from the link I provided you in a comment,
(Input effect on keyboard tab -> focus, but NOT on click)
Here is what I'll do:
var body = document.getElementsByTagName("BODY")[0];
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
body.classList.add('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
body.classList.remove('show-focus-outlines');
});
body.show-focus-outlines input:focus {
outline: none;
box-shadow: 0 0 8px 2px red;
}
body:not(.show-focus-outlines) input:focus {
outline: none;
}
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
Note that I used Javascript only (in the link, that was jQuery),
and tried to render something nice with the CSS.
Hope it helps.
very simple.
you can use :focus for styling elements
if you want different style for Clicked on object use :active to style it.
here is an example for <a> tag.
.click,.focus{
color : red;
text-decoration: none;
}
.click:focus{
outline: none;
color: red;
text-decoration: none;
background-color: #fff;
}
.click:active{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}
.focus:focus{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}
.focus:active{
outline: none;
color: red !important;
text-decoration: none;
background-color: #fff !important;
}
<a class="click" href="#">Click Me</a><br>
<a class="focus" href="#">Focus me[use Tab]</a>
input[type="email"]:hover {
border-color: #848484;
}
input[type="email"]:active {
border-color: #0174DF;
}
input[type="email"]:focus {
border-color: #0174DF;
}
I want to make an input like the one on Google search, when the cursor is over input (not focus) the color of border gets dark (I've made this with :hover), when I click on the Input now change to blue, but just when I release the click the color get backs to the :hover state, how can I do that?
This is the solution:
input[type="email"] {
outline: none;
background-color: white;
border: solid #A4A4A4;
}
input[type="email"]:hover {
border-color: #939393;
}
input[type="email"]:focus {
border-color: #0080FF;
}
to have the same input at google.com
So, I've been stuck at this for a couple of hours. I'm essentially trying to get a checkbox to work as a toggle button. I want the styles applied by jquery to be only applied when it's checked and back to it's initial if it has been deselected.
The HTML markup:
<form class="simple_form new_mailing_list_form" data-remote="true" id="new_mailing_list_form" method="post">
<div class="input boolean optional mailing_list_form_opt_in">
<input name="mailing_list_form[opt_in]" type="hidden" value="0">
<label class="boolean optional control-label checkbox toggle-button" for="mailing_list_form_opt_in">
<input checked="checked" class="boolean optional" id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
Yes, I would like to join the mailing list.
</label>
</div>
The SCSS:
#new_mailing_list_form {
.opt {
color: $white;
background-color: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
}
.checkbox {
margin: 0px;
padding: 0px;
}
div label input {
margin-right:100px;
}
.mailing_list_form_opt_in label {
cursor: pointer;
background: transparent;
border: 2px solid $selectiveYellow;
border-radius:2px;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow:auto;
margin:4px;
padding: 8px 15px;
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
.mailing_list_form_opt_in label {
display:block;
}
.mailing_list_form_opt_in label input {
display: none;
}
.mailing_list_form_opt_in input:checked {
background-color:$selectiveYellow;
color:$white;
}
}
JQuery:
$('#mailing_list_form_opt_in').change(function () {
$(this).parent().css({ 'background-color':'#ffbb00','border':'2px solid #ffbb00', 'color':'#fff' });
});
I've tried using a conditional statement as well, but I start to descend into spaghetti JQuery which doesn't even work.
Work on it so far: Working CodePen link
You could use jQuery's toggleClass() method to change the background whenever a user clicks the element.
$("#checkbox_elem").on( "click", function(){
$(this).toggleClass( 'background-class' );
});
Now all you have to do is have a default style on the element, and place the new CSS rules into the background-class class definition. Clicking the element will toggle the class on the element.
You could use an explicit check on the element if you want to add some more functionality:
$("#checkbox_elem").on( "click", function(){
if ( $(this).is(':checked') ){
// the checkbox is marked as "checked"
// here you can manipulate the style accordingly
}else{
// the checkbox is NOT marked as "checked"
// here you can manipulate the style accordingly
}
});
So, I'm sharing my pure HTML5/CSS3 solution (which doesn't use any JS/JQuery!) to this problem so that it could be helpful for others stuck on something similar.
I refactored my markup as follows,
HTML:
<input id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
<label for="mailing_list_form_opt_in">Yes, I would like to join the mailing list.</label>
and for the styles, I used the adjacent selector + & the pseudo class :checked to show the behavior on that state. The corresponding styles for that are as follows,
SCSS:
input[type=checkbox] + label {
background: transparent;
border: 2px solid $selectiveYellow;
border-radius: 2px;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow: auto;
margin: 4px;
padding: 8px 15px;
#include transition( 0.25s linear);
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
input[type=checkbox]:checked + label {
background: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
color: $white;
}
input[type=checkbox] {
display: none;
}
Works perfectly, added a Codepen so that you can check that out as well! Hope this helps others! :D
How can I create a borderless HTML textbox to work in Google Chrome browser? I would prefer to do this in CSS, if possible.
CSS 3 might help here:
input[type=text],
input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active
{
border: 0;
outline: none;
outline-offset: 0;
}
You can use the following to remove the border and the focus outline out of the text boxes.
input[type=text], textarea {
border: 0;
}
input[type=text]:focus, textarea:focus {
outline: none;
}
in css, write
input, textarea, input:focus, textarea:focus {
background:transparent;
border:0;
}
it is important to make sure no border appears on focus
A textarea? Like:
HTML: <textarea></textarea>
CSS: textarea { border: none 0; }