I am using plugIn Select2 and I wanna do 2 customize in CSS:
Change size ScrollBar of Single select. (I want resize search input -width:80%-, and make bigger scrollbar -occupy the space that has left the SearchBar-)
Change disabled CSS Styles.
Anybody know what are their respective ClassNames? I have searching but I did not found nothing.
(eg: .select2-search input {} ; It is for Search Input)
PD: Anybody knows where can I find all CSS classes of Select2?
Thank you.
SOLVED:
Change size SearchBar Input:
.select2-dropdown .select2-search .select2-search__field {
width: 50% !important;
}
Change Disabled Styles:
.select2-container--disabled .select2-selection--single {
cursor: not-allowed !important;
}
.select2-container--disabled .select2-selection--multiple {
cursor: not-allowed !important;
}
If anyone knows where I can found all CSS ClassNames Select2 I will be grateful.
Related
I'm using ui-bootstrap-tpls-2.5.0.min.js. I changed dropdown-menu's backgorund color like this in specific html.
.dropdown-menu {
background-color: transparent;
box-shadow: none;
}
But it makes datepicker's background transparent too. I know why it happened, so I cleared that line but nothing changed.
So I want to change datepicker popup's background using CSS selector like this,
.datepicker .ul{
background-color: white;
}
//this is an example code.
what selector do I have to choose to change datepicker's background?
If this is what you require, you need to add these two styles that are highlighted.
Happy coding :)
If you have the Last Pass extension installed in chrome it displays a ... on the right side of certain input fields.
I was wondering: Is there a way to hide this with css?
You can also hide the icon by adding this attribute to the input element:
data-lpignore="true"
I figured it out!
I placed this in my input field styles:
background-image:none !important;
background-attachment:none !important;
padding-right:0 !important;
border:1px solid #ABADB3 !important;
Which had an effect, but something was still visible. Placing this in my global styles got rid of it completely:
div[id^=__lpform_] {
display: none;
}
To suppress the icon for an input field like below:
<input type="tel" id="cc-number" autocomplete="off">
I used below css:
img[id^='__lpform_cc-number_icon'] {
display: none !important;
}
input {
background-image: none !important;
}
data-lpignore="true"
^^ no longer works I guess. I am not sure, as it didn't work in my case.
As of 2022 the LastPass icon is placed as a sibling to the input field, so I added this rule to my input container and it worked. 😎
div[data-lastpass-icon-root] {
display: none;
}
I've also faced the same issue, As I am using Telerik RadCombobox and RadTextBox, Last pass icon is displaying in all the server controls.
Tried using below css: jst paste it in the aspx page
div[data-lastpass-icon-root] {
display: none.
}
Its working fine.
RadCombobox having icon lastpass
Radcombobox removed icon using above css
Update NOV 2021
I have noticed that all LastPass widgets got class css-1obar3y.
div.css-1obar3y {
display: none!important;
}
Works perfectly for me
I am trying to create a css style that give the same result like native browser highlight so i can put in the css into tinymce.
but from the photo below you can see that the height of the custom css is too low, i tried a few method like using display:inline-block, it works fine for the height but it automatically remove the first and the last space.
Any expert please advise.
Do you mean something like this:
.highlight {
font-size: 14px;
display: inline-block;
color: #fff;
background-color: blue;
padding: .5em 0;
}
Here's a fiddle:
https://jsfiddle.net/c7rdekej/
Create a span around the text you want to highlight and assign a class to it
like highlight
And add css property like below
.highlight {
background:#008AE6;
color:#ffffff;
}
Check this fiddle for clarification http://jsfiddle.net/5u52qw57/
Let me know if it is helpful
I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.
I tried with CSS but it is not working for the icon:
.ui-breadcrumb {
background: none !important;
border: none !important;
icon: url('resources/images/look/bandeau.png')
}
It should be enough with:
.ui-breadcrumb .ui-icon-home {
background-image: url("#{resource['images/look/bandeau.png']}");
background-position: 0; /* asuming bandeau.png is a single image */
}
But you have to make sure two things:
First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.
Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.
Try to target that specific icon by doing so:
.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
background: none !important;
border: none !important;
background-image: url('resources/images/look/bandeau.png') !important;
}
Also check if the background image hyperlink is correct.
I am trying to remove the hover styling on the kendoui treeview component so that when you hover over an item in the treeview it does not have a border / background image etc. I have gotten rid of everything but the border as it looks like there are additional styles that are at play that I cannot seem to locate. Here is my css so far... (in addition to the default theme)
.k-treeview .k-in.k-state-hover{
background-image:none;
background-color:#fff;border:none;
}
.k-treeview .k-in.k-state-selected{
background-image:none;
background-color:#fff;color:#000;border:none;}
Currently it is just showing a border which looks to be black as opposed to the grey one that was there before I added the styles above... Any idea what I can do to get rid of this stubborn border?
With the addition of this style embedded on the page I was able to get it to do what I wanted. I believe this was partially related to how the css was being loaded (order) in multiple different sharepoint webparts on the same page...
.k-treeview .k-in.k-state-hover, .k-treeview .k-in.k-state-selected {
border-style: none;
border-width: 0;
padding: 2px 4px 2px 3px;
}
Coupled with the use of .k-state-disabled, it appears I might have found a slightly better CSS solution.
The nodes don't move at all, and it appears completely disabled.
.k-treeview .k-in.k-state-hover,
.k-treeview .k-in.k-state-focused,
.k-treeview .k-in.k-state-selected {
border-color:transparent;
background-color:transparent;
}
I've also added some JavaScript to prevent the expanding of the nodes, and disabling of the checkboxes.
In my case this helped:
.k-window-action .k-state-hover {
border: none;
background: none;
}
P.S.: "border-color: transparent" caused slight move on hover