So my cursor is still the default one even though I've changed it to pointer. As I was taking screenshots to post here I noticed if I hovered on the link and hit CMD it would change to a pointer but it would remain like that everywhere on the page unless I hit CMD again. My second problem is turning off the default shadow on an text input field. Ive tried box-shadow: none; but it didn't work. Im on a mac using safari 9.0.3Default shadow on input element
form {
width: 100%;
input[type=text]{
border-radius: 0.5em;
height: 1.5vw;
font-size: $fntSize;
width: 12.7%;
position: absolute;
top: 10.35vw;
left: 68.3vw;
box-shadow: none;
cursor: text;
}
input[type=image]{
position: absolute;
top: 10.8vw;
left: 80.1vw;
height: 0.8vw;
cursor: pointer;
Solving the issue with the cursor would be a lot easier with a jsfiddle that replicates the error on your end.
In terms of the default styling on the input, that's actually a border style not a box-shadow. The input defaults to border-style: inset so you just need to set your desired properties in its place. E.g. border: 1px solid #ccc or border-style: solid at a minimum.
Related
I made a transparent button:
.home-btn-left {
position: fixed;
left: 20px;
top: 20px;
background-color: transparent;
width: 100%;
height: 100%;
cursor: pointer;
}
<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
It doesn't have a hover, focus or active state. But when I push it on my iphone I see this and I really don't wanna have it:
Do you have some suggestion?
https://jsfiddle.net/3bfptxty/
First off, you should apply the styles for every state of the <a> element using:
.home-btn-left,.home-btn-left:hover,
.home-btn-left:active, .home-btn-left:focus { /* your styles */ }
then you should add the otline property, to prevent dotted outline or similar behaviours
outline: 0;
Edit:
on more digging you might be searching for -webkit-tap-highlight-color, like described here
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 }
I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.
For some reason my login textbox is not clickable in the main area, only on the bottom-border. I looked at other topics on this issue and people have been advised to check for transparent overlapping elements, I checked and I don't see any - also tried messing with a higher z-index but that also did not work. Would love some input!
.input_large {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border: 1px solid #929292;
padding:5px;
width:259px;
background-color:#f6f6f6;
}
this is the CSS. The problem is also viewable here: click
Thanks in Advance!
The span#status is overlapping the input. If you reduce the height of the span it allows the input to be clicked.
#status {
border-radius: 11px;
height: 50px; /*Height reduced*/
left: 0;
margin-top: -100px;
padding-top: 15px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 100%;
z-index: 0;
}
You could also not position this element absolutely, which will allow the input to be clicked. I'm not sure the reasoning behind this element being position:absolute.
The <span id=status> element is in the way. It is not visible (opacity: 0) and blocks the Username control. Instead of using opacity: 0, you can use visibility: hidden, but it seems like you could just tweak the height and positioning of the element so that it fills up the white space above the inputs instead.
I'm trying to remove dots in a textarea which are present at the bottom-right corner.
Here's an example of what I mean (from Chrome):
How to remove those diagonal lines?
Just add in your CSS file
textarea { resize: none; }
Later (2019) edit:
Related to this answer of mine and the rising number of GitHub code search results on resize: none declarations applied to textarea elements, I wrote some lines on why I think CSS resize none on textarea is bad for UX:
Very often, the textarea is limited to a number of rows and columns or it has fixed width and height defined via CSS. Based solely on my own experience, while answering to forums, writing contact forms on websites, filling live chat popups or even private messaging on Twitter this is very frustrating.
Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.
from https://catalin.red/css-resize-none-is-bad-for-ux/
So you might want to check this out before adding the above to your stylesheets.
It is as simple as the following code. Just give the textarea the style resize: none
<textarea style="resize: none"></textarea>
html
sass
textarea {
position: relative;
z-index: 1;
min-width: 1141px;
min-height: 58px;
}
.resizer {
position: relative;
display: inline-block;
&:after {
content: "";
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
}
}
.arrow-resizer-textarea {
height: 0;
width: 0;
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
z-index: 2;
}