I have a button in my application and currently its very basic:
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Which means it has the default HTML CSS effects used w/it. I was attempting to change it w/CSS but everytime I make the button bigger, there's always this dark side on the right and bottom side..I'm not sure why. If I change it back to its default, its not there.
Here is the JSFiddle:
http://jsfiddle.net/htzgak6g/1/
I'm referring to the right side and bottom side. They seem darker to me than the other sides. All I want to do is have some type of button with rounded corners and a nice shade of color.
This is because buttons come with some basic default browser styles that are still taking effect because you haven't over-ridden them.
In this case, adding border: none will remove the border and the dark colour. (http://jsfiddle.net/htzgak6g/2/)
Look at a reset css to solve these problems and give a consistent blank slate across browsers.
The problem is that the browser appends default style to the elements which are marked by <system> in Firebug. You can use the Selectors style panel to view all the styles added.
As Toni said, you will need to use reset.css to ignore such styling. But for this specific problem, set the border-color to be transparent.
button {
border-color: transparent;
}
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Just add border-style:none; like so:
<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button>
Here is your updated JSfiddle
Related
I am creating a dashboard that needs to adhere to corporate style requirements. I need to alter the background color of the header. I have successfully altered the color except for when I mouse over the header, it changes to a different color.
Here is an example of the header with the proper color scheme:
Here is the same dashboard with my mouse hovering over the header:
For added measure, here is the result of inspecting the element:
Any help that can point me in the right direction to keep the background of the header a white color would be greatly appreciated.
There will be an css property most likely .logo : active or something - remove this.
Would need full code to give a definitive answer.
I solved the problem by adjusting the CSS that appears in a supporting CSS file. In the OP, the inspect element tool points to a second CSS file that I had not altered. Specifically, the all-skins.min.css file.
Once I located that file, which for R/shinydashboard, the file appears in the AdminLTE directory of the package library/shinydashboard, I found the element that affected the behavior:
.skin-red .main-header .logo:hover{background-color: }
Since I wanted the background color to remain white, even on hover, I inserted #FFF into the background-color element and, now, the background color for the header remains white even on hover.
I installed triggered scrollbox and it's working but text box where you have to write your e-mail has white background and white font(font for whole theme is white). SO i would like to change it to any other color.
Thing is that i can't acces CSS to change it so i have to do it somehow in HTML but i don't know how.
This is the code:
[gravityform id="9" title="true" description="true"]
So question is how can I modify this gravity form code that change color of font?!
Vital information: other solutions can't help(CSS, etc.) bcs wordpress there is bought and it's pretty limited so i'm looking for a solution in HTML that can be implemented particulary in this line code.
You can set styles for input element in your HTML like this:
<input style="color: pink !important; background-color: black !important">
May be you need (may be not) to add !important to your styles to overwrite existing ones.
You can install plugin for custom css and add your custom css there to overide gravity form css.
Here is one simple plugin to do that: Cssor
Write the below css in your style.css
input{
color: #000; // if it is not applying, use ! important
}
It works for all input boxes
I have this site where some keyboard only people will use. On some certain elements nothing shows when tabbed onto them. the element is as follows
<div id="NBSCustomiseHomepageLink"><div id="NBSCustomiseHomepageButton">Edit your profile</div></div>
I have added an outline to get the correct border I want for when it is tabbed onto it. The problem I face is that I don't know how to make it so it comes on when its tabbed onto any ideas?
css code is
#NBSCustomiseHomepageLink{
outline:black dotted thin;
}
If i am right it :focus and Fiddle is here
I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");
I'm trying to add a downward-pointing chevron (basically a down arrow) from the FontAwesome icon set to a form select box. I've removed the default styling from the select box and added the icon as a pseudo-element after the form. It's working as-intended in a jsFiddle, but not on the site I'm working on.
It seems like the issue may be that the background: transparent; styling on the select isn't working the same on the site as in the fiddle, but I'm not sure why that would be the case. I know I could make the icon visible by increasing the z-index, but then the select dropdown won't show when the icon is clicked (as it does in the fiddle).
Edit: I need to have the dropdown show up when the icon is clicked; this is the case in the fiddle, but doesn't work with a higher z-index on the pseudo-element
Edit 2: Example of accepted solution is in this fiddle; also removed link to production website.
Any thoughts on what's happening here?
Seems as you have 2 different problems - positioning and functionality. Currently your website doesn't display the arrow at all. And even if it did, clicking on the arrow would not open the dropdown list. Simply putting it on top, may work in some browsers, but AFAIK would not be a cross-browser solution.
Per functionality, add 'pointer-events:none' to the arrow alement. This will make sure that it doesn't handle any clicks and they will be propogated to the select elemnt.
Regarding your positioning:
Instead of changing the z-index, simply set the min-width to N pixels and remove the absolute positioning from the arrow.
In CSS selector ordering:after
Remove `position:absoulte;`.
In CSS selector select.orderby
Change width:100%; to min-width: 200px; (or any width you need)
Hope this helps!
You have z-index: -1 on this .woocommerce-ordering:after in your css. Make it 0 or larger than 0 and it works.