I use Bootstrap in my Rails app, in it I have a navbar that contains some elements. When I press one of these elements I present a modal popup. When I close this popup, the clicked element for some reason gets highlighted. This isn't the experience I'm looking for.
See image below:
I wonder how I can get rid of this unwanted effect?
Without you supplying us with a Fiddle, it is very hard for us to determine what is going on exactly.
Although, from your image, it seems as if it is just 'focus'. Below is an image from the Bootstrap website, and it features one of their 'default' buttons. On the left is the button in its original state, and on the right is the button after I have clicked on it and it is in 'focus'. Chrome, by default (created by their 'user agent stylesheet') places this light blue border around elements once they are focused.
To remove the border for all fields you can use the following:
*:focus {
outline: none;
}
To remove the border for selected fields just apply this class to the input fields you want:
.nohighlight:focus {
outline:none;
}
*:focus
{
outline: none;
}
this is work like a charm
Related
I am setting up my own website, and before I do that, I am working on understanding what I want to do following along with a W3 Schools tutorial.
When you click open, it brings up the overlay properly, and when you hover over the text in the overlay, the text changes color, but I want to make it so that when you hover over text, the background of the overlay changes to an image. As it stands the overlay color is gray, but when I hover over something say "dogs" I want the background to be replaced by a picture of a dog.
I have tried to use the CSS :hover function but was only able to have it change the background-color of the individual navbar element, not the whole overlay.
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
background-color: red;
}
This only changes the background color of the navbar element.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
Here is the link to the w3 schools tryIt site, to see the rest of the code.
In CSS you can not change the style of a parent element by Hovering a children element.
You will need Javascript.
I was able to figure it out, by using JQuery, and this is the code that ended up working for me.
<script>
$(".about").hover(function(){
$(this).parent().parent().css("background","red");
});
$(".about").mouseleave(function(){
$(this).parent().parent().css("background","blue");
});
</script>
So basicaly what is happening here is that I have a navbar, which has different links in it each with there own class (for example as you can see here "about" is one). And what I have JQuery do is when you hover over a specific element, it changes the background of the parent attribute.
Note I had to do .parent().parent() because of the way I have it setup, it may be possible to do it with just one .parent().
And then what happensis when you hover over the element in the class it will changed the css of the parent attribute, and then when you the mouse exits the element, the background will go back to what it was originally, so in this case blue.
I hope this helps anyone if they ever have a similar question!
here's the link to my dialog (click here)
I tried to fix the below in order to referring to the official website dialog (click here) but I can't find how to do that:
I need to :
bring back the cross sign (x) at right side of the dialog,
and add the small exclamation image,
change background color of the title frame only,
and buttons (Delete all items & Cancel), the frame that surrounds them must be like here (with space "High, Down, Left, Right").
Looking at the chrome dev tools, it seems you image files for icons are not loading.
Sort this out and this will fix your icon problems (close button and exclamation image).
Set what ever color you want using following css.
.ui-draggable .ui-dialog-titlebar {
background: red;
}
For Dialog buttons use following css
.ui-button {
padding: .4em 1em;
}
I am trying to create a sweet looking Button in Bootstrap. I have 4 images which show the discrete states of my button (Normal, Hover, Pressed, Disabled).
But I cant figure out what the best practice for this is. using the src in an input type image doesnt seem to be working that nice, since browsers will create a blue rect when clicking.
(I just need the whole image to be the button, its not a logo or smth that needs to be displayed on a certain position)
EDIT: its for my custom facebook/google/outlook login buttons
You need to replace the url's with the images you have.
.fb {
background: url(http://placehold.it/50x20/00ff00);
}
.fb:hover {
background: url(http://placehold.it/50x20/0000ff);
}
.outlook:disabled {
background: url(http://placehold.it/50x20/000000);
color: white;
}
.fb:active {
background: url(http://placehold.it/50x20/666666);
}
<button type="button" class="fb">button</button>
<button type="button" class="outlook" disabled>button</button>
Best practice will be to use :before elements where You will be displaying image on "button".
You can use img tag inside anchor tag to do so
For toggling between the states you can use jQuery.
Let me know if you require any further help!!
For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
I'm making a theme for wordpress. My navigation bar has rounded corners like apple's site. I want to add a hover style to it, but I can't get it to hover with rounded corners, like apple's nav bar does. I'm using a big image for the background and using wordpress 3's menu system. So, how can I hover the first and last item on the bar? Thanks for helping.
With javascript you can select and change whatever you want but if you just want to use css, you´ll have to apply the :hover to the parent of all button sub-elements so that you can select all sub-elements using css. However, that excludes older versions of IE as they don´t support :hover on elements other than a tags.
Example:
.button:hover {
//
}
.button:hover .main_section {
// change to main section of button on hover
}
.button:hover .left_part {
// change to left side on hover
}
.button:hover .right_part {
// change to right side on hover
}
You'll have to have a different background image for the "hover" style.