I want to hide the down arrow symbol in the #Html.DropDownList. How to override the default dropdownlist style.
Please see the image below.
You can use css to set custom apperiance to your dropdown:
.customDropDown { -webkit-appearance: none; -moz-appearance: none;
// add background image what you like
}
And add this class to your dropdown :
#Html.DropDownList("DropDownID", String.Empty, new {#class="customDropDown "} )
You can override default styles from native CSS, but it while support only web-kit borwsers
.dropDown{
webkit-appearance:none
//and change style whatever you want
}
Related
I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:
.some-company-control(#text-color, #hover-text-color) {
color: #text-color;
&:hover,
&:active {
color: #hover-text-color;
}
}
The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.
Thanks everyone for any suggestions!
Try to add this rule:
&:focus:not(:hover) {
color: #text-color;
}
in an another question I find this possibilty with css
.menu .label
{
-fx-text-fill: black;
}
but it doesn't work with the setStyle method
menu.setStyle("-fx-text-fill: black");
The CSS applies the style to each Label below a Menu.
Whereas menu.setStyle(...) will apply only to the menu itself. And the menu itself does not have a -fx-text-fill property.
If you change your CSS to:
.menu
{
-fx-text-fill: blue;
}
then it will be the same as your code ... and also stop to show the menu in color.
Menus don't support setting their font color like this. The CSS solution relies on an implementation detail.
If you don't want to do that you must use menu.setGraphic(...) to set a node, e.g:
Menu menuFile = new Menu("");
Label t = new Label("File");
t.setStyle("-fx-text-fill: blue;");
menuFile.setGraphic(t);
I have the following CSS which is injected by JavaScript:
select {
-webkit-appearance: none;
}
If I open up Chrome developer tools and uncheck those properties things look OK. How would I override this property in the CSS?
"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."
Here are some options available:
button
button-bevel
caret
checkbox
default-button
listbox
listitem
media-fullscreen-button
media-mute-button
media-play-button
media-seek-back-button
media-seek-forward-button
media-slider
media-sliderthumb
menulist
menulist-button
menulist-text
menulist-textfield
none
push-button
radio
searchfield
searchfield-cancel-button
searchfield-decoration
searchfield-results-button
searchfield-results-decoration
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
square-button
textarea
textfield
For more look at mozilla:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
or
http://www.w3schools.com/cssref/css3_pr_appearance.asp
This is a CSS3 protery so you should be aware of the comparability:
http://i.imgur.com/NajSN0O.png
Maverick's answer is correct, but to be specific, I found the following put the scroll bar back on a select item:
select{
-webkit-appearance: menulist
}
I am using a simple ASP.NET linkbutton control.
<asp:LinkButton ID="LinkButtonDelete" runat="server" CssClass="linkButtonDelete">Delete</asp:LinkButton>
I am styling this button with the following css definitions:
.linkButtonDelete:link
{
background: transparent url(/../images/btnRegular.png) no-repeat scroll 0 0 !important;
}
.linkButtonDelete:hover
{
background: transparent url(/../images/btnHighlight.png) no-repeat scroll 0 0 !important;
}
And here is the problem: If I disable the linkbutton (LinkButtonDelete.Enabled = false;) and then hover over the linkbutton, the background image shows btnHighlight.png (instead of btnRegular.png). I tested this in IE9 and Chrome. Same effect.
Is there any chance I can apply a "disabled" style with CSS only (please no Javascript!)?
Thanks
I'm keeping my other answer because it would work as well, but if you want a purely CSS solution, look into Attribute Selectors which are supported starting with CSS 2.1. Assuming ASP.NET sets the disabled attribute, you could add something like so:
.linkButtonDelete[disabled="disabled"]:hover
{
background: something else;
}
It sounds like it's acting exactly as you tell it to. It's showing the hover. If you don't want it to show the hover, when you are disabling the button, it sounds like you need to set the Class to something else and create a new class that doesn't have the hover.
LinkButtonDelete.Enabled = false;
//then
LinkButtonDelete.Attributes["class"] = "linkButtonDeleteDisabled"; // give it a new class
or
LinkButtonDelete.CssClass = "linkButtonDeleteDisabled";
Is there a way to hide the checkbox icon for an ListItem and just display the value-text.
Like Below - Checkbox for items is hidden.
I could figure out that I could disable (grey-out) or completely hide (invisible) a list item but not just hide the checkbox icon (square)
I recently did this as part of a project and accomplished it via setting an attribute when creating the ListItem and then using CSS to style it.
li.Attributes.Add("id", "removecheckbox");
Since the attribute is added as part of a tag, you can use the following descriptor in your CSS.
#removecheckbox
{
color: Gray;
}
#removecheckbox input
{
display: none;
}
Of course, you can format the CSS any way you'd like, but this should get you started.
If you'd like more information using selectors in CSS, check out this reference from w3.org.
HTH!
CSS3 will help you, define Inline style, good point is to make special UserControl for CheckBoxList to use following solution
<style>
input:disabled {
display: none;
}
</style>
and in CheckBoxList PreRender event disable ListItem to apply CSS input:disabled selector
protected void CheckBoxListMajad_PreRender(object sender, EventArgs e)
{
foreach (ListItem it in this.CheckBoxListMajad.Items)
{
if (it.Value.Equals("0"))
{
it.Enabled = false;
it.Selected = false;
it.Attributes.Add("style", "font-size:14px;height:16px;font-weight:bold;");
}
}
}
CheckBoxListMajad.RepeatColumn=3