So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
Related
When I created some code, I noticed something strange. The DOWNLOAD button touches the end of the left wall, there is no gap (500% zoom). But when I decrease the zoom from 500% to 250%, a piece of background appears (green color). Watch the video on which I show it. Below is the source code from the video. Is this a browser rendering bug or my code is bugged?
Windows 10, 10.0.18362, 64-bits
Google Chrome, 75.0.3770.100, 64-bits
video: https://youtu.be/uwAEixLBUeU
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; border: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 1em; line-height: 1.2; color: #222; }
html { background: #bbb; }
body { width: 1000px; margin: 0 auto; background: #fff; }
a { text-decoration: none; }
.modelerInputReport {
overflow: hidden;
padding: 5px;
}
.modelerInputReportDiv {
float: right;
}
.modelerInputReportDiv span {
display: inline-block;
}
.modelerInputReportDiv button {
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
.modelerInputReportDiv button:hover {
border: 1px solid #1B273F;
}
.modelerInputReportDiv button:active {
background: #cc7600;
border: 1px solid #402400;
box-shadow: inset 0 0 10px 2px #402400;
}
</style>
</head>
<body>
<div class="modelerInputReport">
<div class="modelerInputReportDiv">
<span id="modelerInputReportMsg">(generate to unlock) -</span>
<span>Report:</span>
<button id="modelerInputReportPrint" class="modelerInputReportPrint">PRINT</button>
<button id="modelerInputReportDownload" class="modelerInputReportDownload">DOWNLOAD</button>
</div>
</div>
</body>
</html>
In my experience this sort of thing is a rendering 'quirk', rather than a 'bug' per se. When you change the zoom level of a document, you're asking the browser to scale your '1px' border to a different number of pixels wide. Sometimes this doesn't equal a whole number of pixels, so the browser needs to do something to account for that. That something might be anti-aliasing, rounding widths to the nearest pixel, etc. This sort of thing needs to happen whenever you have anything that's not a whole number of pixels on screen. It's one of those things that happens at high-zoom levels, and in most cases it's not a big enough problem to worry about.
If it is a problem in your case, you can try doing things to minimise the effect, for example:
Use non-pixel measurements border: 0.1rem solid #CCC
Adjust the way the background is drawn: for example, include spacer elements between your buttons, and background color them, leaving the containing element background the same color as its border.
Experiment with small margin, transform or position adjustments (0.5px - 1px) to nudge the element slightly over the border.
These are all indirect ways of tricking the browser's renderer into doing something that's better for your specific case, and I'm not sure any of these will actually work. They might have undesirable side effects in other OS's and browsers, too.
TL:DR - It's the browser, and don't worry about it unless you really need to!
this is display:inline-block; issue because of inline-block use some spacing
Use float: left instead of display: inline-block,
Use this css
.modelerInputReportDiv span {
float:left;
}
.modelerInputReportDiv button {
float:left;
vertical-align: middle;
cursor: pointer;
font-weight: bold;
padding: 8px;
color: #fff;
border: 1px solid #ccc;
background: #0066cc;
margin-left: 5px;
}
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)
I have this issue with <input type="text">where I see some extra border in top and left of the input box.
I have this CSS code -
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: auto;
border-radius: 10px;
}
I am attaching the screenshot from chrome. Firefox shows the same thing.
Try
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: none; /* <-- This thing here */
border:solid 1px #ccc;
border-radius: 10px;
}
By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.
Demo
#add {
width: 60%;
height: 25px;
margin: 0 auto;
border: 1px solid black;
border-radius: 10px;
}
Border auto is doing that for you. So have your own defined border style.
I noticed in Chrome that the user agent style that causes this specific look is border-style: inset; You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.
Simply set border: 1px solid black; and you notice that the border will lose that inset look.
If you want extra caution, you can set border-style: none; This will cause the border to disappear altogether. You can then set the border as you wish.
I would test any of these solutions across different browsers.
Chrome User Agent Stylesheet:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset; /* This rule adds the inset border */
border-color: initial;
border-image: initial;
}
By setting the border: none; will override/nullify the default input css of the text field and then you can add your own custom css to beautify the input text element like so:
border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/
However the above method is unnecessarily tedious whereas you could achieve the same result in just a single line with:
border-radius: 10px !important; /*this simply does the trick!!!*/
**Note:** The !important property in CSS is used to provide more weight (importance)
than normal property. It means that “this is important”, ignore all the subsequent
rules
<input type="text" style="border-radius: 25px;" /> 100% works
Try this thing
Is it possible to add padding before line-break? As in, making from this to this .
Current CSS code:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
I had to add an extra margin-left:0; to make the two lines start at the same point.
This can be done with pure CSS. Create a solid box-shadow to the left and right of the highlight in the same color (and use margin to correct the spacing). For your case:
span.highlight {
background: #0058be;
color: #FFF;
box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
padding: 2px 0;
margin:0 5px;
}
It took some tryouts, but here it is: the single- and multi-line highlighter with additional padding.
HTML:
<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>
CSS:
h3 {
padding-left: 5px;
}
p {
background: #0058be;
position: relative;
padding: 0 5px;
line-height: 23px;
text-align: justify;
z-index: 0;
}
p span {
background: #fff;
padding: 2px 0 2px 5px;
position: relative;
left: -5px;
}
p em {
background-color: #0058be;
color: #fff;
padding: 2px 5px;
}
ins {
position: absolute;
width: 100%;
line-height: 23px;
height: 23px;
right: -5px;
bottom: 0;
background: #fff;
z-index: -1;
}
The trick is to style the whole paragraph with a blue background, and only put white background on top of that at the beginning and the end. Doing so assures blue background elsewhere...;)
Two main disadvantages:
The highlighted text has to start at the first line (but does not necessarily have to flow into a second),
The paragraph has to be aligned with justification.
Tested in Opera 11, Chrome 11, IE7, IE8, IE9, FF4 and Safari 5 with all DTD's.
See edit history for the previous less successful attempts.
You can achieve this using just box shadow, with no messy padding or margins.
The trick is to use box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
display: block will achieve part of what you want, but of course it will make the span a block element, and so you won't get the wrapping behaviour seen in your example.
Your screenshot holds the clue to what you need to try and do: you need to impose a margin to the left and right on your "normal" paragraph text, and then have the span disregard this (and include its padding), to achieve an "overhang" of your blue highlight when compared to the rest of your text. You can't do that with straight CSS on your span, because it covers two lines and obviously "left" and "right" only refer to the span, and not the individual pieces of text contained therein.
Straight CSS isn't the answer here. You might want to take a look at this question, which uses a jQuery filter to grab the first word in an entity, etc.:
jQuery first word selector
Maybe you can use this technique.
http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
The closest thing, if it really matters that much I'd say is to add display: inline-block;
UPDATE: Fixed with margin-bottom: 0px;
But somehow it still affect the text box size. Larger.
Then if I use outline instead of border, the border-radius will not work.
I have a problem with the these elements when one of them is clicked/focused,
it's affect the other element's position. It's because the border is larger than the normal size. So how to fix it?
For example: Click on the text area, it'll make the text input move away.
Note: I don't want to use box-shadow. No need to use position property actually.
HTML
<h3>Text Area</h3>
<textarea></textarea>
<br />
<h3>Input: Text</h3>
<input type="text" />
CSS
input{
background: #fff;
border: 1px solid #B7B7B7;
font-size: 15px;
margin: 2px 0;
padding: 5px 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
input:focus, textarea:focus {
border: 3px solid #507ad5;
margin-bottom: 0px;
}
textarea {
width: 300px;
height: 100px;
}
UPDATE: See and test it directly: http://jsfiddle.net/hedaru/dSgxr/6/
Here it is how it supposed to be: goo.gl/jAojK
Your CSS specifies the focused elements to be larger than the non-focused versions of the same elements.
Adding a border physically grows an element. Either add the same number of pixels of border to your element's base (with white colour) or use outline.
Here's my fix: http://jsfiddle.net/g105b/dSgxr/2/
It happens because of this:
input:focus, textarea:focus {
border: 2px solid #507ad5;
}
If you add another pixel to the border, the element is going to move.
You should keep the border at 1px and change its color.
input:focus, textarea:focus {
border: 1px solid #507ad5;
}
Update:
Use margins instead of position, it will fix it in the same place and the borders will "grow" around it. Here's an example.
CSS:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-top: 0px;
margin-left: -1px;
}
Another option (besides merely changing the border colour) is to add a margin that shrinks by the same amount that the border grows. Note that the margin must be large enough to overcome the margin collapse with adjacent elements.
Perhaps you can change the difference in margin. It seems like the margin-bottom of the elements right now is 2px, so when you change it to 0px on focus, you compensate for the growth of the element. Like so:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-bottom: 0px;
}
Or just add "margin: 0px" on the focused one. Just make sure margin+border makes the same number on focused and unfocused.