I have the task to track down and remove this blue border around the drop down box however I have not seen any css that is relevant to this. From what I've read the drop down is part of the shadow dom but where is this blue border coming from?
I am not sure where it's coming from, but you can override it by using CSS if you have the privilege to update the css.
I don't know how your markup is like, but this will override the blue border.
.class-dropdown {
outline: none;
}
NOTE: If accessibility is a requirement, it's probably bad idea to remove the blue border. What is better probably have a state style when the dropdown showing / selected
Hope this helps.
Related
I'm using dir-pagination found here.
This utilizes bootstrap styling. I can change the rest of the styles for the pagination controls, but I can't force the hover effect to have no color.
I can ensure that it has a color, by specifying one, but if I try to override it in a way that will force it to not have a color such as transparent, it defaults to the white color. My specificity is exactly the same as in the bootstrap css... but even if I remove the style in the bootstrap css is still defaults to white.
Been researching this for hours.
EDIT: See the following plunkr for an example of my problem.
http://plnkr.co/edit/2OvXNgX81NspuO9g356J?p=preview
twilliams Hi there.
Is this what you are trying to do?
Add this to your css.
.pagination li a:hover {
background-color: rgba(255,128,128,.5);
}
This will change the pagination background transparent color when each one is hovered.
Have a look at this Plunker.
I just realized my mistake and I feel foolish. I was making the assumption I had another element below with the color I wanted, and I was simply changing the color of an overlay element.
Turns out I didn't have that other element below, and so it really was just pulling the white of the monitor. I was a little clouded by the complexity of my current project that I didn't see it like I did with the simplicity of the plunkr example I made.
I am showing a modal panel whenever a button/panel is tapped. My problem is look and feel of this modal panel because I don't want round edges and thick black border on this panel because rest of my app has thin borders and sharp edges. here is fiddle of something similar : http://www.senchafiddle.com/#0RPKU
Is there a property of panel which I can change to avoid this? If not can you give me CSS example which can fix this?
In the example fiddle you give you would need to change the padding css property.
The quick and dirty way add the following line into your popup panel definition:
style: '-webkit-border-radius: 0; border-radius: 0;'
If you want something cleaner - go with SachinG approach - create your own CSS class, add it to each panel, but the key CSS difference remains border-radius.
A cleaner approach would be to define your own styles in custom class and set to modal panel. That way you'll be having all the control over appearance. You don't have to worry about positioning the modal in correct place that because behavior does not get affected.
Like-
.some{
border: 1px solid #000;
background: #fff;
color:#ff8100;
font-family: verdana;
...
}
and add this class as baseCls:'some' to modal panel. I personally don't like adding inline styles and stuff. I wish there could be a config option for such thing like ui config options. But ui config does not work with panels i guess.
I'm using a text widget, Black Studio TinyMCE, in WordPress. For some reason, I cannot get the background color to match the background of the header (#192E82). Currently, the header looks like this -- as you can see, there's a white outline surrounding the text area:
And when I Firebug the selection, Firebug shows this:
I can add whatever custom CSS I'd like to. But I'm not sure how to do so. I'm unsure which class I should use a # before, if any, or which class I should use a . before. Ultimately, I'd like to make that white area around the edge to match the background color of the header.
For instance, this doesn't work -- in fact, nothing I've tried works!
#widget-wrap .textwidget {
background-color:#192E82;
}
Does anybody know how I can accomplish getting the white to match the header background? Any guidance would be appreciated!
EDIT: Here's a Fiddle of everything I could find:
http://jsfiddle.net/jasonpaulweber/nvkVT/
Hard to give a precise answer with only the info included, but I would inspect one element at a time, from the <strong> and upwards in the hierarchy, and look for an element with either a white background-color and a padding, or a thick white border. If you do that I'm sure you'll spot it. Once you've identified it just let me know and I'll try and help you targeting it with a CSS selector.
According to the fiddle, the white space is padding of the header-right element
You should set
#header-right {
background-color:#192E82;
}
Which css should I apply to textbox that make it same as background means user does not feel like he is typing in textbox? I tried giving same background color but it still doesn't provide exact what I want. User still can feel that it's a textbox.
Do you mean like this?
input {
border: 0;
background: transparent /* the important bit */
}
Live Demo (I added a blue border on a parent element so you can see where the <input> is)
http://jsfiddle.net/eUmr2/1/ (with gradient background to more easily see the transparent)
Appears to work in IE6:
If I understand your question correctly, you should first of all "hide" borders of textarea or input field. You can simply use "border:none;" property for this. In this case, if both backgrounds will be the same (e.g. textarea and rest of the container) it will be displayed like you need.
I don't know exactly what are you trying to achieve, but this method is used usually for not standard designs of form fields. The only you need to do is to be sure that this part of your page is OK from usability point of view.
Good luck!
Remove the borders and apply the same background color as the container it's in.
I'm using Aristo's CSS3 buttons seen here. One thing I like about Facebook's buttons are the little sliver of grey between the border and background of blue button elements. To see this go to "Messages" then "New Message" .. the Send button has just a bit of grey to make it pop out. It looks like this is achieved with this bit of code:
background-position: 0px -17px;
I've put up my attempts on jsfiddle here. My goal is to avoid creating a nested element if possible. I guess I could also create an image and set that as the background, but I was hoping this would possible just with CSS. Thanks!
Perhaps you could use the outline property for the border, and then you get to use the border property for the highlight.