How to remove the default outline generated by chrome for the select option list ?
below i have added outline property to none which disable the select element outline.is there any simple way to remove the option tag's outline?
select {
outline: none;
}
Look :
https://jsfiddle.net/thilinasan166/oqfvugbs/1/
You cannot style the outline or whatever you call it, for the options dropdown as it comes from default Operating System.
Check this How to remove border of drop down list : CSS -- this answer
Despite that create your own custom select dropdowns you can find plenty of them on the web
INSPIRATION for Custom Select Elements
Related
I am trying to use the Checkbox from https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox.
By default, it will show the check mark when I hover on the checkbox (please see below), whereas I don't want to show that check mark on hover. Is there any props or styles I can set to achieve that?
Paste this in your CSS this will be applied to all the checkboxes in your element.
.ms-Checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
display:none;
}
In case you want to apply only for a specific checkbox make it a class like this
Inside your CSS
.custom-checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
display:none;
}
In your react component
[Note] this example is from the Microsoft website you provided
<Checkbox label="Unchecked checkbox (uncontrolled)" onChange={_onChange} className="custom-checkbox" />
I was trying to add some css styling to my wordpress website. However, I'm quite confused how to select the element and add the css !
Let me explain it in detals in three scenarios:
Picture 1:
I'm going to change the color and width of that button with text "Submit your attendance" inside. I wanted to make it red.
First Try: Picture 2:
I selected the calss which is :
wpcf7-form-control wpcf7-submit
Added the background-color: red , but it didn't work.
Second Try: Picture 3:
I did the same for this class:
wpcf7-form-control
Thrd Try: Pictur 4:
In inline style, when I add background-color: red and width: 100% in workes. I noticed a style attribute is also added. However, I'm not sure how to add in my Custom CSS of wordpress. I mean which element should I select? Of course Inline-style is not an element.
This is not an issue with regard to WordPress. This is due to CSS Specificity. What this means is that the rule that is more specific will "win" and be applied. This is why inline styles typically work over non-inline styles.
In your example, the rule that is being applied is more specific than the one you're trying to override with.
There is a hierarchy when it comes to specificity and the order in which rules are applied. Here they are in order of most specific to less:
Inline Styles
Ids - targeting the ID of an element is more specific than targeting a class
Classes, attributes and pseudo-classes (for example :hover)
Elements (for example a "p" tag) and pseudo-elements (:before)
Either add an ID for the your button or target the class in a more specific manner. For example body .thecontainer .thediv .anothercontainer .myelement
This might be work. You need to add !important property.
wpcf7-form-control{ background-color:red !important; }
Try this.
To update worpress css you have to edit the file style.css
Appearance -> Editor -> style.css (search inside other files)
or
Appearance -> Customize -> Additional CSS (where you have to add manually every line of code)
Sometimes you need to add "!important;" at the end of line, something like:
background-color: red!important;
In my Angular 6 App I am using kendo multiselect, When I select values from the dropdown, they appear in the multiselect field. But I want to remove the (x)- close icon just for one of the values.
I tried with just css:
#problemWith .k-button:first-child .k-icon.k-i-close {
display: none !important;
}
But this removes the close icon (x) for the very first tile. Is there anyway to apply css based on text!
You may try to remove the :first-child from the css selector
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I have been trying to conditionally remove the menu arrow at the end of a Select box in my current project which uses gwt-bootstrap3.
I have tried the following options:
<select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showMenuArrow="false">
<select:Option ui:field="option1" text="option1Text"/>
</select:Select>
I have also tried via the api, using
fieldName.setShowMenuArrow(false);
I am mainly looking to disable this menu arrow when I would like to indicate that this selector is disabled and that options are not available for select dropdown.
On inspecting element via the browser:I noticed that within the div for the select box there are other divs/spans and one nested as a child of the main selector div specifically with the
<span class="caret"></span>
On removing this class name I could make the menuArrow disappear.
However accessing the specific span tag with this caret class using a querySelector and then making sure this is the right one (from the entire page which has other such selectors too) seems a slight challenge and unwieldy.
Here's a snippet from the inspectElement on chrome.
inspecting the Select element and the span with caret
This seems like a bug in the menuArrow handling for the Selector and if it is indeed one, can anyone suggest a workaround until fixed?. Appreciate your suggestions/answers. Thanks!
The setShowMenuArrow method is for something else: it turns on/off this arrow:
If you want to hide caret on all disabled Select boxes you could try with css:
.bootstrap-select.disabled .caret {
display: none;
}
If you want to hide it only some of them, first add new class name, for example no-caret-on-disabled and use this:
.bootstrap-select.disabled.no-caret-on-disabled .caret {
display: none;
}