I'm playing around with a firefox extension written in XUL, and wanted to customize the style of a textbox element.
Here is what I've come so far (CSS file) :
textbox.custom-style {
-moz-appearance: none;
border-radius: 3px;
box-shadow: 0 1px #CCC inset;
background: #FFF;
border : solid 1px #CCC;
}
The style applies correctly but when I've added this rule to alter the style a focused textbox, it doesn't seem to work.
textbox.custom-style:focus {
border : solid 1px #ACC;
}
I've tried the same rules for a button element and it seems to work OK (when I 'tab' to the button, it gets focus and change its style as expected)
So what am I missing here? Is this a known bug? I've looked around for a bug report or a workaround but to no avail.
For <textbox> element, a special attribute focused is added whenever the element has the focus. You can check for the presence of this attribute to determine if the element has the focus within a style sheet. It will have the value true.
This is because actually focus is in <html:input> element which is inside <textbox> element.
Related
I currently have a global blue theme (saga-blue). I managed to change the text and bottom border color (to match the desired brand colors) by using simple css.
However, when a menu item is first selected, it gets this ugly blue-colored border behind it, as such:
https://imgur.com/SYF7xmJ
No matter what CSS I try, I can't manage to remove it. I can't find where it comes from when I inspect the element. Also, it gets removed as soon as I click anywhere else on the screen: it is just there for the first click on the item, goes away after any other click.
CSS that I have tried:
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
I also tried unsetting any property that had to do with 'left' or 'right' on the menuitem and menulink components - but the ugly blue border just keeps on showing. If anyone has any idea what kind of property this might be, I would really appreciate it.
If your style is not applied and you want to override the primeng default styling, you may need to use :host ::ng-deep.
Another way of applying style to a PrimeNG component nested element, is to use the styleClass template property. It is not everytime efficient, you need to sometime force the css through the !important priority modifier. It is not the cleanest way, but there is few CSS properties that are inlined by calculation on some component.
For your specific problem, the .p-tabmenu (and subclasses) is playing with a mixin of focus, when the element is in focus state.
#mixin focused() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
}
You need to play with the property box-shadow to remove/modify this blurred color that you dislike with the advices I gave you on the primeng styling if it is not applied as you wished.
Don't forget the pseudo-class :focus while overriding the style.
You may have this kind of result to remove it completely.
:host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
box-shadow: none;
}
Try outline: 0 this is something that defaults browsers do for accesibility mainly.
Using jade template with doctype html at the top.
Styling for input and select:
input, select {
...
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input's border radius is shown correctly, but the select's border shows 5px, which is the user agent's value, even though investigating in the calculated tab shows 3px, from the style above, should be applied.
How is it possible that my style seems to have been applied, but the calculated value and the look of the select, do not match my style?
Please note that I am not trying to get rid of or replace the drop down arrow, I just want my input and select to have the same border-radius, but while the input looks good, this weird issue is happening with the select
Dev tools clearly shows that the user agent's 5px for border is being crossed off, and yet, this is the value being shown in the calculated value and visibly being applied to the element.
Any hints would be appreciated.
This is a little dated but I figured it should be answered nevertheless.
You have to add appearance: none to apply styling to those elements.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.
For more details see https://css-tricks.com/almanac/properties/a/appearance/
input, select {
width: 150px;
border-radius: 50%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<select>
<option>foo</option>
<option>bar</option>
</select>
<br>
<br>
<input>
I've got this selector code:
#ajax_hits_counter_popular_posts_widget-2.widget li img {
// Give the thumbs in the widget some style
border-radius: 5px;
margin-right: 10px;
border: 4px solid #353434 !important;
}
Everything is rendering properly except for the border: 4px solid #353434 !important;
When viewing in either Firebug or Chrome Dev Tools, the border: property doesn't even show up at all, while the others do.
If I manually type the same exact code into Firebug or Chrome tools, it works fine.
Live is here (it's the "Top Posts" thumbnail widget at the bottom right): Meanwhile, In America
Anyone know why?
// Give the thumbs in the widget some style
is invalid in CSS. The browser seems to ignore the following property, as you can see in this example. If you remove the "comment" it works as expected. (On your page, the border declaration directly follows the "comment", unlike in the CSS posted here)
Comments in CSS have to be enclosed in /* ... */.
As tim.baker mentions, you have have to use border instead of border-style.
Looking at your CSS it seams as though you have used
border-style: 4px solid #353434 !important;
Using purely
border: 4px solid #353434;
Should work
ASP.NET
When TextBox1.Enabled = false; it has a gray background in FF3, but no change in IE8 or Chrome. So it's harder to tell if it's disabled or not. Is there any more general way to make the disable textbox rendered more consistent on a top-level? So I don't need to change this for every page or every website? Please advise, thanks.
You could set a CSS style to handle disabled text controls to render them consistently. For example, something like the following:
input[type="text"][disabled] {
background-color: #ECECEC;
border: solid 1px #7F9DB9;
color: #CCCCCC;
}
For IE7 support (and possibly even IE8), a !DOCTYPE must be specified or CSS attribute selectors will not work. Unfortunately, if you require support for IE6 this will not work and you have to use a CSS class on any text input instead.
You can assign a CSS class to it using the CssClass property and control it as much as you want.
More on the CssClass property here.
Sample CSS:
.DisabledTextBox {
background-color: #C0C0C0;
border: solid 1px #A0A0A0;
color: #A0A0A0;
}
Then use the CssClass like this:
<asp:TexbBox id="DisabledTextBox" CssClass="DisabledTextBox" value="Some Value" />
I'm currently writing some stylesheets for mobile browsers and have come across a strange issue in the Android browser. When changing the font-size CSS attribute of a text box the box gets bigger to accomodate the larger text. Doing this on a select box however does not change the size of the select box, but the text still gets larger (actually overlapping the top and bottom of the rendered form element).
Can anyone tell me if it's possible to increase the height of select boxes in the Android browser. Or if not point me in the direction of a list of CSS attributes that can be applied to them.
Thanks.
Another option you can use (tested on galaxy S running android version 2.1-update1):
select {
-webkit-appearance: listbox;
}
select, input {
width: 100%;
height: 40px;
line-height:40px;
border: 1px solid #999;
border-radius: 6px;
margin-bottom:10px;
}
This way the inputs and selects all look the same, clicking the select will open the options menu as usual.
This seems to be a browser bug. You can also reproduce it when you set your browser's text size to 'huge' (in settings). I added a new issue and suggest a workaround with a custom background image for now:
<select style="background: url('big-select-bg.png')"/>
try this one:
select{
-webkit-appearance: menulist-text;
}
Set the opacity of the select control to 0
Then place a span contorl styled to look like a textbox behind the select control so that the select control are sits directly on top of the span.
The user won't see the select control but when the user attemps to enter text into the span the dropdown options for the select control will appear.
After the user makes their selection use javascript to update the innerHTML of the span with the value of the select control.
Make sure the dimensions of the span and the select control line up well.
(Do not use an actual texbox control)
mealaroni.com
For me "-webkit-appearance: listbox;" solved the issue not completely.
I had to add a padding attribute additionally:
select {
-webkit-appearance: listbox;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #bbb;
border-radius: 4px;
padding: 0 0 1px 8px;
}