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
Related
I have a table that runs a script that puts a tablefilter at the top. The table font is white so it makes the text in my input box white as well and you cannot see what you type. I have done this in CSS:
input, select, textarea{
color: black;
}
textarea:focus, input:focus {
color: black;
}
The only issue with the above is if you lose focus on the box it changes back to white. So you type something in and move on to the next box and it turns white again. How can I make it work in CSS that once I enter text and even if I lose focus on the text box it stays black?
Here: http://jsfiddle.net/fw26qevk/1/
#myTextBox {
border: 3px solid gray;
width: 368px;
height: 33px;
color: silver;
font-size: 22px;
padding-left: 10px;
padding:5px;
color:black
}
#myTextBox:focus{
outline:none;
border-color:blue;
box-shadow:0 0 10px blue;
color:blue;
}
You can also do it with CSS but adding a class on it when in and out of focus.
$('input[type="text"]').focus(function() {
$(this).addClass("focus");
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focus");
});
I programmed a small app in R shiny using css for my buttons.
However button behavior is not what I expected.
See the gif
See below my code. What am I missing? I tried most of the focus/visited etc.
.btn-default {
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: white !important;
width:120px;
height: 48px;
padding-top: 8px;
background-color: #ECF0F1;
border-width: thin;
margin-right: 2px;
background: #1B1D21;
border-radius: 16px;
border-color: #1B1D21;
}
.btn-default:hover {
color: white !important;
background: #35BC27;
}
.btn-default:active {
color: white !important;
background: #35BC27;
}
.btn-default:focus {
color: white !important;
background: #35BC27;
}
.btn-default:visited {
color: white !important;
background: #35BC27;
}
it's because you have coded it to act like that.
Remove the
.btn-default:hover {
color: white !important;
background: #35BC27;
}
.btn-default:active {
color: white !important;
background: #35BC27;
}
and it will not take any action on hovering it with mouse.
:hover - is a pseudo class which allows you to change a color, size, text, display, width, height - almost everything you want whenever you "touch" it with your mouse.
:active - also a pseudo class which takes action when you try to do something with it.
I had the same problem after using the CSS from MaterializeJs.
The problem was on button:focus event in my case, but I think this could appear also on hover, focus-visible and others. You have to override the inherited property. Also, you can try to use "!important" on your back.
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; }
I want to set the common parts of a property with one class, and then the discrete portions with a second set of classes. In this case I want to have 1 class where I can adjust the border thickness that will apply to all the 1-n discrete city classes. With the following sample the border does not get applied at all. I have a constraint where I have to make it work in IE8 (sigh)
.cityImage {
border: solid 5px;
}
.chicago {
border: #333;
}
.detroit {
border: #999;
}
(and the list continues for about 10 items)
_______________
<img class="cityImage chicago" src="http:... />
<img class="cityImage detroit" src="http:... />
Your code was slighltly off
.cityImage {
border: solid 5px;
}
.chicago {
border: #333;
}
.detroit {
border: #999;
}
should be
.cityImage {
border: solid 5px;
}
.chicago {
border-color: #333;
}
.detroit {
border-color: #999;
}
Note: You do not need to state an intial border color but if you don't it will default to the current text color applicable to the element..stated or inherited.
I think what you are looking for is border-color: #999. This can then be added with the parent class cityImage.
I have a span tag within a button. I just want the span text to change on hover from white to dark when I hover the button. The only way right now it will work is if I put the hover on the span tag itself and then the mouse pointer has to be exactly on the text within the button. If not the whole button is white on hover.
a.sf-button.transparent-dark span {
}
a.sf-button.transparent-dark span:hover {
}
a.sf-button.transparent-dark {
color: #FFF;!important;
background-color: #12225b;
}
a.sf-button.transparent-dark:hover {
color: #666;!important;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}
a.sf-button, a.sf-button:hover, #footer a.sf-button:hover {
color: #666;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}
`
I can not change the way the button is setup because its part of a theme.
Here is the HTML:
<a class="sf-button large transparent-dark stroke-to-fill " href="https://www.domain.com" target="_self"><span class="text">button text</span></a>
I actually went ahead and setup a fiddle for this. And it actually works on the fiddle. So perhaps this means something is interfering with it. But I can not determine what would be.
http://jsfiddle.net/robmcmon/4ZWUX/
You should be able to do something like this:
.test-button:hover .test-span {
color: #ff0000;
}
This should change the spans appearance when the button is changed.
Fiddle: http://jsfiddle.net/DbpgW/