How to remove border (outline) around text/input boxes? (Chrome) [duplicate]
Tags: css,google-chrome,input,border
Problem :
This question already has an answer here:
Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
Solution :
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it, though:
textarea:focus, input:focus{
outline: none;
}
You may want to add some other way for users to know what element has keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:
*:focus {
outline: none;
}
CSS Howto..
This hack works: #yjsg6 { margin-left: -50px; } You can't affect the content of the iframe, because it's from a different origin. It should be possible to affect iframe styles...
You could try putting a literal control in the header, and setting the literal content in code-behind. <asp:Literal id="cssliteral" runat="server" /> Code-behind: cssLiteral.Text = String.Format("<link href='{0}' rel='stylesheet' type='text/css' />", cssUrl);...
Try this: CSS: .da,.db{ position: relative; // changed to relative. Because of absolute your document height is affected. z-index: 0; top: 82px; bottom: 30px; } .db{ left: 142px; top:42px; right:...
Try this:- display: inline-block; *display: inline; vertical-align: middle; ...
Most fonts are not proportionally spaced. "WWWWW" is wider than "iiiii", therefore counting characters will not work. You need to put the actual text in a SPAN in the DOM...
try :nth-child CSS property tr:nth-child(3n+0) { background-color: lime; } tr:nth-child(3n+0) td { border-top :1px dashed blue; } Working DEMO More Updated after reading your comments, try this tr:nth-child(3n+1) td {...
It would be useful to know what kind of shape that is. I am cutting an ellipse in half for my solution. This was kind of fun. Edit: Changed my...
Well there's your problem! <div id="slideshow"> <ul> <li><img src="/images/header01.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru - Cusco, Peru" /></li> <li><img src="/images/header02.jpg" alt="Habitats Peru - Cusco, Peru" title="Habitats Peru -...
The more specific you define your css, the more priority it gets in CSS. You need to define your custom rules more relevant than the bootstrap ones. Example: p.test {...
Is not very clear what you are trying to do, but i understand that is something like transition: left 1s; or transition: transform 1s; and when you press your button...
One option is to remove width: 100%; and add display: inline-block; to .srt-menu ul li. EDIT The new code you have provided requires an additional change. Remove width: 12em from...
The selector .navbar-default .navbar-nav > .active > a means Select any a element that is a child (>) of an element with the "active" class that is a child (>)...
To improve my original comment on the question: In order to fix only the URLs that start with a slash (/), something like the following command should be run: (edited...
I think you are describing the "sliding doors" technique. HTML: <div class="myImg">This is the text</div> CSS: .myImg { background:url(myImg.gif) 0 0 no-repeat; display:block; height:200px; /* your image height */ text-indent:-99999em;...
I think you may want to look to flexbox for this, coupled with an inline-block fallback (display: flex, display: inline-block). Note that layouts may vary for browsers which do not...
Unless you need that extra div, remove it. There is sometimes a difference between the height of an element and its length along the main axis (column orientation), which is...
Though it appears you have already tried this you should create a custom CSS stylesheet that Chrome will use with a plugin like Stylish (not sure if there is a...
If you set the background color and have a negative right margin on the image, the image will cover the external link image. Example: a[href^="http:"] { background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center...
As stated in the other answers, what you're trying to do is called pagination. This can be done with Javascript/jQuery or solely with PHP. The jQuery code is here. To...
Try this: .f1 { float:left; box-shadow: 1px 1px 2px #777; -moz-box-shadow: 1px 1px 2px #777; -webkit-shadow: 1px 1px 2px #777; position: relative; width: 280px; height: 380px; overflow: hidden; margin-right: 10px;...
That is exactly what Firebug is for. I prefer to work with Chrome Inspector, but it is very similar. right click on any element you want to 'investigate' choose 'inspect...
you could use a small bit of jquery to load your center circle with the text you want. $(document).ready(function() { $('.quart').click(function() { var ind = $(this).index(); switch (ind) { case...
you lose your image far away up the corner. It is caused by the rotation. In fact, this rotation also cause your animated image to be rotated. Instead of rotated...
You can easily test this by adding the margin and padding to every element. So if you have a simple page with let say only one div, you would have...
Not a particularly nice solution but it seems block_prefixes is passed to block form_row. Block_prefixes is an array of the form field types in order of inheritance so a text...
Change <button id="submit" class="retrievedoc" type="submit" >Submit</button> to <button id="submit" class="retrievedoc" type="button" >Submit</button> If the type is submit the form will automatically submit and will cancel out the dialog....
you can use position:absolute in your SVG and some text-indent in your #itemCountForCart .buttonCart { padding: 2px 40px; border-radius: 6px; border: none; display: inline-block; color: #fff; text-decoration: none; background-color: #28a8e0;...
Did you try to assign classes? Either with pure Javascript: document.getElementById('selector').className = 'active'; or with jQuery: jQuery('#selector').addClass('active'); This way you can use CSS classes and not hardcode the colour in...
Set the opacity to 1 for the a:hover that is specific to the links that you don't want to have that effect on. Also, make sure it occurs afterwards in...
I have used percentages to the input fields. The 'last name' field have a border so it was needed to set it as box-sizing: border-box: otherwise it would fall down...