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
Related
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.
I am working on select-like control that is built with Bootstrap's dropdown component. You can look at it here. Selected options are marked with ok glyphicon.
I am facing rather strange problem. Steps to reproduce:
Open dropdown and select some options
Note that all text labels are aligned equally
Close and open dropdown again
Text in previously selected options is slightly shifted.
Tested in Chrome 54/55.
Any ideas? Thanks in advance.
This is due to inline-block property. Use display: flex property on li.selected. Like:
li.selected {
display: flex;
}
I've updated your Plunker code. Please have a look.
Hope this helps!
You can try this:
.open>.dropdown-menu {
padding: 5px;
}
li.selected {
padding-left: 0px;
}
Working fine for me.
I've been implementing Bootstrap 3 onto my website, and I am currently experiencing this issue after having selecting the Contact button and closing the pop-up window that comes up:
I do not want Contact to be lit up or highlighted in any manner after closing the popup. What do I need to edit in my CSS file to make this work?
Thanks.
EDIT: Here is my code showing my nav-bar with all of my options. I believe I'm supposed to select something in here in order to edit the CSS of the Contact area.
In CSS, the focus pseudo class is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
By clicking on the button, Bootstrap adds styles to your button via btn:focus, btn-primary:focus, et cetera. One of the styles Bootstrap adds is a border around the button. In order to override this style, you can create a selector that hides the border of your button. For example, you could do something like this.
.btn:focus {
border: none;
}
If this doesn't work, try
.btn:focus {
border: none !important;
}
This will do it for you see example: https://jsfiddle.net/DIRTY_SMITH/LLvkptuk/
Add this to your CSS:
.btn:focus,
.btn:active {
outline: none !important;
}
Check this
input[type="button"]:focus,
input[type="submit"]:focus {
outline: none !important;
} /* for forms */
a:focus {
outline: none !important;
} /* for anchor */
In my asp.net MVC app, I'm using a HTML text input, while I apply a style to format currecy value and I want it to RIGHT align so that I also apply style.
But the cursor does not appear in text box? What is the possible reason and please provide the solution?
HTML
<input type="text" class="OnlyMoney" />
Script
$(document).ready(function () {
$("input[type=text].OnlyMoney").live('keydown', currenciesOnly)
.live('blur',
function() { $(this).formatCurrency(); });
});
CSS
.OnlyMoney { text-align: right; }
Note: If I change above style "text-align: left" then cursor is visible in text box.
I got the answer from here. this solved my issue.
Just style your input like this:
caret-color: #333333;
i faced a similar issue and adding padding solved my problem. Just give some padding right to your .OnlyMoney class and check
CSS:
.OnlyMoney { text-align: right; padding: 0 2px 0 0; }
I am using the following CSS class to hide a textbox in an asp:UpdatePanel to accept input from a USB card reader.
<style type="text/css">
.USBBox
{
position: absolute;
left: -999em;
}
</style>
When I click an asp:LinkButton control that is configured to be an asp:AsyncPostBackTrigger for the update panel the control appears on the page and the CSS class is not applied to the asp:TextBox control.
This behavior is displayed in IE7. It works as expected in FireFox 3.5.7
What would cause this behavior and how do I resolve it
There my be a specificity issue. Try
input.USBBox{
position:absolute!important;
left:-999px!important;
}
And if it works, back out of the !important tags to see what actually caused the issue.
Also declare display:block; just in case.
I think you should use:
.USBBox
{
display: none;
}
or maybe use a asp:HiddenField instead of a textbox.
try
.USBBox
{
display: block;
width: 100px; /* or however wide you want it */
position: absolute;
left: -999em;
background: #ff0000; /* visually ensure the class style is being applied, remove it later */
}
position should only work on items that are displayed as a block. form items by default are displayed inline.
also just for giggles set the background color just to make sure the input box is taking class.
Could it be that the new control comes with multiple classes ?
Because IE is having issues when combining classes on a single element..