How would I make a submit button appear as just plain text which will override the default browser button style?
I have searched the internet but all I find is how to put a image for a submit button.
You will need background-color: transparent; (Or you can use hex as well) and border: 0;, that will get you the desired result.
input[type="submit"].plain {
border: 0;
background: transparent; /* Or whatever background color you want to use */
}
Demo
input[type=submit] {
border:none;
background-color:white;
}
And an example you can find here:
http://jsfiddle.net/f7x35/
You could style it something like this, and then make the needed tweaks to it to make it fit the rest of your design.
input[type=submit]{
border: 0px;
background: inherit;
padding: 0;
}
The background: inherit; is to make sure it follows your original background color.
Related
I wanted to implement a syntax highlighting feature in my app.
Please ignore the possibility of contenteditable.
I'd like to implement the feature via:
textarea with invisible font and background, floating over a pre with appropriate colors applied to the text. The cursor and selection background should render in the textarea, but the highlighted text should show through from the underlying pre.
Now, it seems there is something special about textarea (or my CSS ignorance) that makes this not render correctly (e.g. making background/color of a textarea also makes the cursor invisible).
Is there a way to achieve my goal?
I don't need general help. Attached is an image of my editor in action. Highlighting and selection are visible, cursor is not. :(.
You could use thee CSS-property caret-color for the textarea. This will set the color specifically for the cursor/ caret and ignore the color of the background/ text for the textarea. This does unfortunately not work in IE/ Edge (It is however supported by the remaining major browsers).
I clearly did not get what you meant before and pointed you toward a code editor like ace.
I see now I just created the example of what you asked above. You can hide the text in the textarea by doing something like this color: rgba(0,0,0,0); But that will also hide the cursor.
*{
box-sizing: border-box;
}
div{
position: relative;
}
pre{
background: black;
color: white;
font-size: 14px;
}
textarea {
font-size: 14px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
border: none;
padding: 0;
color: rgba(0,0,0,0);
}
<div>
<pre>This is my pre
-
-
</pre>
<textarea>This is my pre</textarea>
</div>
I have the following style class for button -
.buttonStyleClass {
padding:5px 20px;
}
When I try to focus the button in Firefox, then focus outline is appearing inside the button after padding. But when you verify the same in Chrome you will find the focus to entire button including padding.
In my application focus outline seems to odd in firefox since it is appearing 20 pixels inside of button.
Is there any CSS fix for this issue ?
Thanks,Gopal
Actually in both Firefox and Chrome I see the outline OUTSIDE of the button... Check out this fiddle. You can easily hide the outline though:
.buttonStyleClass { outline: 0; }
If this is not the answer; could you provide us with a fiddle or screenshot of what you mean?
edit
It's probably a bit OS-specific, as I only saw the dotted (inner) outline when I added a explicit border to the button (button { border: 1px solid red; }).
You can remove, or alter, the outline with the :-moz-focus-inner selector, like this:
button::-moz-focus-inner { border:0; padding: 0; }
Also check out the updated fiddle
I realize this is a very old question, but no one has actually answered the question yet, and several people have given bad advice. Given I got here via Google, other people may come here and leave with that bad advice.
For accessible reasons, you should never remove styling like this, unless you replace it with something better.
Instead of:
button::-moz-focus-inner {
border:0;
padding: 0;
}
Try:
button::-moz-focus-inner {
padding: inherit;
}
Try out this
button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }
<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>
Add this to your CSS.
.buttonStyleClass:active {
outline: 0;
}
Are you viewing this in a web browser? You said 'application' in your query.
If I understand correctly you are saying that:
Chrome : outlines around the button area inside padding.
Firefox : outlines the area outside padding.
This is a browser specific rendering problem.
Two solutions come to mind.
Don't use padding for you button instead use:
.buttonStyleClass {
height:50px;
line-height:50px;
text-align:center;
}
Alternatively use -webkit targeting to write specific browser css markup.
http://jsfiddle.net/JV6MH/4/
This fiddle should render focus outline the same in both firefox and chrome by avoiding the use of padding on buttons.
I have a simple HTML page with background image, and now I'm applying a contact form on this HTML page.
I want to show the background image in the text input field i.e, I want to make input text field transparent. I have use CSS code background-color:transparent;, but it doesn't work. I am getting a white background for input text field.
try this
.contact
{
background: url(https://www.gravatar.com/avatar/ba03773d5fe4b970a7d7fb57a112e932?s=32&d=identicon&r=PG) no-repeat right center;
height:100px;
width:200px;
padding:10px;
}
.contact input[type="text"]
{
background:rgba(0,0,0,0);
border:1px solid #fff;
color:#fff;
}
http://jsfiddle.net/2ZmFA/
This is working on Fiddle:
input[type="text"]
{
background: transparent;
}
and withour border if you want by border: none;
Here is the Fiddle
So your problem must be at another place in code. Add more code and i will update my answer ;)
<input type="text" class="textInput"/>
CSS :
.textInput {
background: transparent;
background-image: url(Images/textBg.jpg)
}
You could set the background color to transparent.
background-color: rbga(0,0,0,0);
alternatively in css3 you may set the opacity of the whole element:
opacity: 0;
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;
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.