I'm using Firefox and cannot seem to get rid of the outline around a selected option.
My code
HTML
<div class="drop-select">
<select name="date" id="date">
<option value="01">01</option>
<option value="02">02</option>
</select>
</div>
Pretty straightforward.
CSS
.drop-select {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 80px;
height:25px;
-webkit-appearance: none;
overflow: hidden;
background: url('http://www.adcentre.com.au/media/1326/bg-down-arrow.gif')no-repeat right #fff;
float: left;
margin-right: 5px;
margin-top: 6px;
margin-bottom: 6px;
}
.drop-select select {
background: transparent;
width: 125px;
height: 25px;
border: none;
padding: 5px 0 0 5px;
color: #000;
outline:0;
}
Even with me setting the outline to 0 and border to none, it still displays it?
Example in JSFiddle:
http://bit.ly/SpQGC4
The problem here is that the dropdown's parent, div.drop-select, has a black border. Remove that, and the black border will disappear.
Don't confuse outline with border; in many browsers, outline defines the glow that, for example, a text input field gets on focus (as I write this answer in Safari, the text box has a blue outline with a slight blur). Border refers to something much like an outline, but generally used on things other than form elements, and generally present in all element states, rather than just focus.
It's also worth mentioning that, in some browsers, both on Windows and Mac OS (not sure about Linux distros), the outline of form elements can be styled.
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
Although I'm using the same CSS for both <input> and <select>, text in <select> gets cut off, while the text in input is perfect. Why is this happening and how to fix it?
input,
select {
box-sizing: content-box;
width: 90%;
height: 23px;
padding: 10px;
font-family: TheBoldFont;
font-size: 27px;
color: #f26e7c;
border: 4px solid black;
border-radius: 12px;
}
<input type="text" value="xxxxxxx">
<select>
<option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>
This is the result:
And this is what show up on hover in Developer tools of Google Chrome:
Firstly remove the height: 23px; declaration.
Notice the the text is not cut anymore, however the elements have a greater height than what was needed.
To fix this, just change the padding to padding: 6px 10px;
FIDDLE
input,
select {
box-sizing: content-box;
width: 90%;
padding: 6px 10px;
font-family: TheBoldFont;
font-size: 27px;
color: #f26e7c;
border: 4px solid black;
border-radius: 12px;
}
<input type="text" value="xxxxxxx">
<select>
<option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>
Increase the line-height of the select by a few pixels.
This worked for me.
Changed this:
select {
line-height: 15px;
}
To:
select {
line-height: 17px !important;
}
It happens because of the padding. Consider only using padding left and right, combined with min-height.
You could increase the height of the select item:
select{
height: 40px;
}
Check it out:
That weird or what?
Here's the CSS:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid gray;
}
How do I lose the holes?
To answer your question...
Yes, that is weird but not that weird.
In terms of fixing it...
Well that depends on the HTML you have there. Assuming (as i have) that its a textarea inside a div with rounded corners then you should be able to use overflow:hidden to ensure the textarea's corners are clipped. EG:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid #333;
background:white;
overflow:hidden; /* <- try adding this */
transform:translateY(100%) scale(3); /* <- nothing to do with the solution - just zooming in so you can see the corner */
}
textarea {
border: none;
background:red;
}
<div class="highlight">
<textarea>
It not that weird
</textarea>
</div>
This question already has answers here:
iOS forces rounded corners and glare on inputs
(6 answers)
Closed last month.
I have a site which is working properly except for the input field and submit button next to it. They are not showing properly on iPad. The height of the input box is slightly more than the submit button, making it look weird.
What I think is that Safari mobile has different viewports(1024px) etc, but renders the same WebKit appearance as of Chrome. Then why the input box is showing different on iPad?
Here is how it looks in Google Chrome on my desktop:
And here is how it looks on iPad:
The HTML part goes simply as:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
And the CSS for the same is:
#search-form {
overflow: auto;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 26px;
}
input#Search {
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.defaultText {
width: 88%;
padding-left: 4px;
height: 29px;
float: left;
background-color: #f7f7f7;
border-right: 0px solid #666;
border-bottom: 1px solid #666;
border-color: #999;
margin-right: -33px;
}
.defaultTextActive {
color: #999;
font-style: italic;
font-size: 15px;
font-weight: normal;
}
.search_btn {
font-size: 13px;
font-weight: bold;
height: 34px;
cursor: pointer;
float: right;
margin: 0;
width: 33px;
background: url("../images/search.jpg") no-repeat;
text-indent: -99999px;
border: 1px solid #999;
border-top: 2px solid #000;
margin-top: 0px;
margin-right: 1px;
}
As you can see, the border effects of input are also not being rendered properly in iPad. Anyone have any clue about it?
This snippet of CSS will remove the default WebKit styling from your textboxes:
input[type="text"] {
-webkit-appearance : none;
border-radius : 0;
}
Works on iOS 7 too.
Try to use -webkit-appearance to get rid of the default styles.
Check this answer: iOS forces rounded corners and glare on inputs
Good Morning,
Quick CSS question. Does anyone know any quick css to make an underlined transparent textbox? I basically want the textbox to be invisible except for the bottom border. I need it to function normally. Do I just remove left, right, and top borders and set it's background to transparent or something? Any examples of how to properly accomplish this? This app is for IE7 if that's relevant. Any help is always appreciated.
Cheers,
~ck in San Diego
This should do it:
input.myBox
{
border: 0px solid #000000;
border-bottom-width: 1px;
background-color: transparent;
}
Tested in IE8 (IE7 compatability mode)
Just a suggestion... since people are not going to be used to this, you may want to add a hover pseudoclass as well to change the color slightly when the user mouses over the field, as an extra visual "hint" of what's going on.
Example:
input.myBox:hover
{
border-color: #000066;
background-color: #FFFFF7;
}
Try to set your left, right and top borders values to be none
#textarea {
font-size: large;
letter-spacing: 2px;
height: 20px;
border: 2px solid gray;
padding:10px,20px;
width: 50%;
overflow: hidden;
resize: vertical;
min-height: 30px;
line-height: 20px;
outline: none;
border-top:none;
border-left: none;
border-right: none;
}
<textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="Your message here.."></textarea>