I want to remove the stylings from a textarea and leave it all white without any border or glow, if possible. I've tried with different stuff found here on SO, but nothing works (tried with FF and Chrome).
So, is it possible and if so how to do it?
What I've tried so far:
textarea#story {
// other stuff
-moz-appearance:none;
outline:0px none transparent;
}
textarea:focus, input:focus{
outline: 0;
}
*:focus {
outline: 0;
}
The glow effect is most-likely controlled by box-shadow. In addition to adding what Pavel said, you can add the box-shadow property for the different browser engines.
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
resize: none; /*remove the resize handle on the bottom right*/
}
You may also try adding !important to prioritize this CSS.
If you want to remove EVERYTHING :
textarea {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
try this:
textarea {
border-style: none;
border-color: Transparent;
overflow: auto;
outline: none;
}
jsbin: http://jsbin.com/orozon/2/
You want a minimal textarea with no borders, or resize-drag-icon.
Both when not selected and when focus.
It's easy but you'll need to update rows attribute via JS as newlines are added or removed during text input.
Here is the CSS
textarea, textarea:focus
{
font-family: "roboto","Helvetica Neue",Helvetica,Arial,sans-serif; /* make your choice */
font-size: 11px; /* make your choice */
border: none;
background: transparent;
-webkit-appearance: none;
-moz-apperarance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
padding: 0px;
resize: none;
width: 100%;
overflow: hidden;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
in order to keep things working as expected (looking good) you have to programmatically set/update textarea's attribute rows to the count of \r\n in the the textarea contents plus 1 when the contents is set and when it's updated (user input / other)
Related
I have styled an oval button and it in an a element with the class .button
It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.
This is the CSS:
a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
Here is the HTML:
Current Stock
This is it in the wild: https://www.frontiercomputercorp.com/
I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class.
To recap: In firefox the button is oval (as I wanted)
In Chrome it is rectangular
HeLP!
Remove the following lines and it will be fixed:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
I tested it in Chrome and it fixed the problem.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.Therefore it overrides your border-radius code as Chrome natively doesn't set border-radius for the button. By not to adding appearance or setting it to none, you won't have this problem in Chrome too.
Just delete these lines below:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
<a> is a clickable type of element. A hyper-link. display: block will do what you want here.
"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."
(I think they are still ugly, but that's not the point here :) )
Here's the CSS now:
a.oval-box{
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
a.oval-box:hover {
color:#ffffff;
background-color: #f00667e;
text-decoration: none;
border-color: #f89520;}
I started this with a button so I got stuck thinking button. But as you have pointed out, it's just a styled block and I don't need the button comand at all.
Thanks.
This may be a dumb question, but this thing is bothering me more than it should. It's a known fact that Google Chrome outlines <input> elements by default when they're focused. I don't like its default appearance so I implemented my own outline for the focus selector on my CSS:
#LoginForm input:focus {
outline: #1F377A dotted 1px;
}
The original Chrome's implementation looks as follows (notice the blue outline around the text input):
But by using my own css implementation it looks like this:
Why does my outline appears inside the text input and not around as chrome's default outline does?
These are the relevant css lines for my input element:
#LoginForm input {
display: blocK;
float: left;
height: 24px;
border: none;
font-family: inherit;
margin: 0px 0px 0px 4px;
}
#LoginForm input:focus {
outline: red solid 1px;
}
#LoginForm .textInput {
padding: 0px 2px 0px 2px;
font-size: 9pt;
}
The only thing that let's me change between my own and chrome's outline is just commenting the input:focus selector and nothing more. I don't want to use borders, since the actually add to the size of the element and I don't want that.
If you check the chrome dev tools, the outline is not a simple 1px outline but shows up as
:focus {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 5px;
}
input:focus, textarea:focus, keygen:focus, select:focus {
outline-offset: -2px;
}
The outline-offset is what you where looking for. To have a red outline simply add this to your style sheet:
:focus {
outline-color: #f00;
}
If you also want it on other elements use:
.element:focus {
outline-color: #f00;
outline-style: auto;
outline-width: 5px;
outline-offset: -2px;
}
Here's a JSFiddle to play with.
EDIT:
To have the outline exactly on the border (and not inside of it) you have to set
outline-offset: 0;
to override the chrome user agent styles.
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
I'm trying to add border-radius to an input submit button, but when I do, Chrome is also adding a grey background colour and a box shadow.
How can I just use border-radius to round the corners, and keep the background colour white, and have no box-shadow?
Here's my HTML:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
And my CSS:
.nm-button {
border-radius: 5px;
}
Here's a demo of the problem: http://jsfiddle.net/CJg43/3/
Use your inspector on chrome and scroll to the element .m-button. (for the quickest way right click directly on the button and say inspect element) If you look on the Elements tab (which should be the first one popped up and look on the right side at the styles section it will show all the css styles being applied to that element whether they were put there by you or by chrome (the cool thing about this styles section is the styles are in order of precedence so you can easily tell which styles overwrite which (that being the higher styles overwrite the lower ones)) or even if they are the default for an element (example display: block; are always on block level elements like divs.) This is a handy tool.
So if you do this in your case you will see that chrome applies different styles to input styles. These are mostly being applied because the input[type="submit"]. If you want to overwrite these styles for the most part just overwriting the same styles in your class on your button should suffice. adding the following should be fine if you only want to overwrite the styles for the background color the "box-shadow" (which it's actually the border that is creating that shadow so just add a new border)
.nm-button {
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
Also since it's a button suggest something like the following code so it looks clickable.
.nm-button:hover {
background-color: #ddd;
cursor: pointer;
}
Here are the styles put there by chrome in your case. It's alot but chrome also is very minimalistic in it's approach so that all of this is easily overwritable. (P.S. I hope this helped, feel free to leave a comment if you have any questions.)
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
white-space: pre;
}
user agent stylesheetinput, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
I want to remove the border that is coming just outside the drop down list.
I am trying:
select#xyz option {
Border: none;
}
But does not work for me.
You can't style the drop down box itself, only the input field. The box is rendered by the operating system.
If you want more control over the look of your input fields, you can always look into JavaScript solutions.
If, however, your intent was to remove the border from the input itself, your selector is wrong. Try this instead:
select#xyz {
border: none;
}
The most you can get is:
select#xyz {
border:0px;
outline:0px;
}
You cannot style it completely, but you can try something like
select#xyz {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
You could simply use:
select {
border: none;
outline: none;
scroll-behavior: smooth;
}
As the drop down list border is non editable you can not do anything with that but surely this will fix your initial outlook.
This solution seems not working for me.
select {
border: 0px;
outline: 0px;
}
But you may set select border to the background color of the container and it will work.