I have managed to remove the text area border but I want it so the user cant see a border even when they click on it. This is my css as of yet.
.comments{
border: 0 none #FFF;
overflow: hidden;
}
I tried making the border transparent, I tried this also but it doesn't work either, also tried it with other attributes active etc.
.comments:focus{
border: 0 none #FFF;
overflow: hidden;
}
Is it possible to remove the border when focused on?
The border isn't visible until the textarea is clicked on btw. So border none does work
You need to set outline:none for the textarea.
.comments:focus{
border: 0 none #FFF;
overflow: hidden;
outline:none;
}
Js Fiddle Demo
textarea, input { outline: none; }
Related
textarea {
outline: none;
}
<textarea></textarea>
This issue is really bugging me and still can't find a solution, why is my textarea broken or showing black or blue outline randonmly? I have no issues in Chrome. It can be removed by mouse click... this is how it is in IE below gif:
Broken outline or border:
That's because the textarea gets the focus as soon as you select it/click on it. You can prevent that by applying a regular border setting to textarea:focus, but this is not recommended, since the highlighting of the focused element is essential for the accessibility of websites in general.
(Depending on the browser you also might want to add outline: none and box-shadow: none) since different browsers handle the focus highlighting differently.
textarea:focus {
border: 1px solid black;
}
<textarea></textarea>
Maybe you can try the following, it makes sure the user can't highlight the textarea.
textarea {
outline: 0;
user-select: none;
-ms-user-select: none;
}
<textarea></textarea>
The solution I found that fixed the issue in the end was adding this to the CSS:
overflow: 'hidden'
I hope this helps others in the future.
I have a form with a lot of color inputs. I am using boostrap and the default look for a color input is horrible so I have been adding my own CSS on top of it to clean it up. I have gotten rid of the big white border but now I would like to have it display as a circle instead of a square. I would like it to be a flat circle with no border and maybe even with a slight shadow for a material design-esque look.
This is one of my color inputs:
<div class="col-xs-1 menu-title-color-div color-input-div">
<input type="color" id="menu-title-color-input"
class="form-control menu-data color-input menu-title-color-input"
name="MenuTitleColor">
</div>
and the CSS I am using to gain the look. (When I figure out how to display them as a circle I am going to move this CSS to a more specific css selector)
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
}
Here is what it looks like so far. There also still seems to be a thin, gray border around the inputs but I can't figure out how to get rid of that either.
github
I hope I am understanding you correctly - you want those three buttons to be circles instead of squares? Or do you want the whole div to be a square?
Either way, this is one option of doing it by manipulating the radius and setting a width and height:
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
width: 100%;
height:100%;
border-radius: 50%;
}
I have the following problem - my textarea and input fields are semitransparent, but I can't remove the border around them completely. I tried making transparent borders or specifying border: none; but they do not disappear (see the image below)
Anyone knows a good solution?
Thank you!
Try this :
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
First, be sure that the borders are indeed applied on textarea, input elements and not other elements such as their parents.
Then, make sure that the border styles are not applied with !important in css files on textarea, input elements.
Finally
$('textarea, input').css('border', 'none !important');
Why are you asking for javascript ?
Try this :
// No border
border-width: 0;
// No box shadow
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
// No outline (ex: blue shadow on Mac OsX on focus)
outline: 0;
If you have a class with the specific rules you can use:
$("#idTextarea").addClass("classYouNeed");
if you have only remove the border
$("#idTextarea").css('border', 'none');
Even if you want to use only JavaScript:
document.getElementById("#idTextarea").style.borderStyle = "none";
Perhaps a bit heavy-handed, but rather than "remove" the borders, why not simply specify their colour as being the same as the background colour?
I have a form with multiple buttons where I use a JavaScript to submit the second button when some one presses enter.
This works great but if I open this form in IE the first button gets a blue border that tells the user "this is the button that will be pressed when you press enter".
Is there any way to remove that with CSS without overriding the rest of the button's styling?
Example:
<button onclick="javascript:alert('remove');">Remove name</button>
Think this should work (only tested IE10 on PC) for the border:
button { outline: 0; }
Want to remove the background (needed on WebKit/Blink)?
Add:
background: none;
Need to get rid of the border (removes background on IE10 too):
border: 0;
Use this code:
button { border:0;}
my solution (after a few months)
button:focus {
outline: 0;
box-shadow: none;
}
Use this code:
button {
border : 0px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
This may help you. Use following CSS properties:
input,
input:active,
input:focus {
outline: 0;
outline-style: none;
outline-width: 0;
}
#sideToggle:focus, #sideToggle:active{
outline: 0;
outline-style:none;
outline-width:0;
}
This solved my problem if anyone else visits the post. I added my own styles separately, as they really aren't central to the issue.
button{border:none; border-radius:4px; -moz-border-radius:4px;}
Simply add border-radius to develop the button look:
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
I have designed my submit buttons using CSS. In any Webkit or Gecko browser it works perfectly, but Internet Explorer 9 adds padding to the button's text when it is pressed down. In addition, you can see this stupid dotted border. It looks like this then:
http://img6.imagebanana.com/img/tkp7l8m3/button.png
The special background image which I have specified in CSS for input:active is only shown in IE, if the button is clicked in the very thin area between the button's border and this dotted border. If the button is clicked in the middle it keeps the hover-background although it is pressed down.
Can anyone help me remove this extra padding and the dotted border?
Thanks in advance
Qoguth
To get rid of the dotted border you can use pure CSS:
button { outline: none; }
As for padding when clicked, I fear it's part of the internal browser behavior that can't be changed.
Both of the answers given so far are incorrect in an important way. You should only hide the keyboard focus outline on :active, hiding it on :focus too hurts keyboard navigation.
button:active { outline: none; }
As has been stated, the increase in top-left padding is not overridable.
You could try:
/* Swap 1px 6px for your desired top+bottom and left+right padding. */
button { padding: 1px 6px; }
button:active { outline: none; padding: 1px 6px; }
Presuming you actually want padding and not some other property.