I have a very basic question. I am setting height to 50px for my html form submit button. It works on Firefox but not Chrome nor Safari. The code is as simple as following:
<input type="submit" value="Send" style="height:50px;" />
Any idea how to make it work on Chrome and Safari?
Change it from <input> to <button> and add -webkit-appearance: none; to the start of your CSS, eg:
.submitbtn {
-webkit-appearance: none;
height: 50px;
background-color:#FFF;
color:#666;
font-weight:bold;
border: solid #666 1px;
font-size: 14px;
}
Just adding -webkit-appearance: none; on my <input> worked for me on safari browser on Macbook.
This should be working also.
-webkit-appearance:default-button;
There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.
button
button-bevel
caret
checkbox
default-button
listbox
listitem
media-fullscreen-button
media-mute-button
media-play-button
media-seek-back-button
media-seek-forward-button
media-slider
media-sliderthumb
menulist
menulist-button
menulist-text
menulist-textfield
none
push-button
radio
searchfield
searchfield-cancel-button
searchfield-decoration
searchfield-results-button
searchfield-results-decoration
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
square-button
textarea
textfield
Adding to Şήøωў's (upvoted)answer:
# Safari 11.0.2 (13604.4.7.1.3) # macOS 10.13.2 (17C88)
e.g.
input[type=button]{
-webkit-appearance: button;
}
solved my issue (of only -size of mostly [-webkit-]font-* having very limited effect);overriding "User Agent Stylesheet":
input:matches([type="button"], [type="submit"], [type="reset"]){
-webkit-appearance: push-button;
}
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 an input of type="submit" and I want exist no blue border around this element when I clicked (right or left click) on it.
I added the picture of OK mode and not OK mode in chrome browser below:
OK mode picture is similar to:
And Not OK mode picture is similar to:
I should say this problem exist in Firefox browser too but the style of that extra borders is dotted.
I tried many ways to solve this problem using CSS like:
Setting border:none; or border-width:0; in default mode and :hover mode and :focus mode of the input but it doesn't fix and still remained.
Also I read some articles about it like this but it doesn't work yet and not working for me.
Any advanced help will be great.
You need to set
outline: none;
input[type="submit"]{
background: #0075E9;
border-radius: 50px;
padding: 15px 30px;
color: #FFD400;
outline: none;
font-weight: bold;
}
<input type="submit" value="Go to the next step"/>
How do I render a normal (enabled-looking) button, via HTML/CSS, which doesn't change its appearance upon mouse over or mouse down (for illustration purposes e.g. Press [x] to cancel)?
(i.e. I don't want it to become "highlighted" or "pushed" when you hover the mouse over it or "press" it.)
I know I can use a picture of the button, but under different or future versions of browsers the subsequent real buttons may look different and not match the picture, which is why I'm looking to render it via HTML/CSS.
Maybe you can consider placing an empty <div> with a specified width and height overlapping the button, which will occlude the click on the button?
Depending the positioning modes of your outer elements, you can use the <div> to cover some outer element, or just the <input type="button" ...> itself (in which case JavaScript and DOM can be helpful to determine the actual size of the button and thus the coverage area).
#Navigeteur
just take a screenshot of a normal button and save it as bmp or png image
and render the image instead of button :)
The disabled attribute is supported in all major browsers, so you could use that.
<button type="button" disabled>Click Me!</button>
or, alternatively:
<input type="button" value="Click Me!" disabled />
To make it look like it's enabled, you could then edit its CSS properties for it's disabled state:
input[type="button"]:disabled, button[type="button"]:disabled {
background:#DDD;
color:#000;
}
But, as OP pointed out, this can make it appear completely different to what other buttons look like on certain browsers/systems. You could omit the background property in the CSS rule and they would render as any other disabled buttons, but with font color like enabled buttons. Alternatively, omit the disabled HTML attribute and position these buttons out of context they would normally belong to (being a part of a form).
EDIT: See Antony's answer for better explanation what styles need to be applied to make it appear like you expect them to ;)
You can force a disabled button to look just like a normal one using CSS.
DEMO
Safari: http://jsfiddle.net/9aXW9/2/
Firefox: http://jsfiddle.net/gZtT7/
IE buried its CSS in the registry. But as a general rule, apply color: #000; and other modifications would make it look like a normal button.
HTML
<input type="submit" disabled="disabled" value="I cannot be pressed." />
CSS
/* Safari */
input[type="submit"]:disabled {
-webkit-appearance: push-button;
-webkit-box-align: center;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box;
white-space: pre;
}
/* Firefox */
input[type="submit"]:disabled {
-moz-appearance: button;
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
text-shadow: none;
}
EDIT: As #geca noted in the comments, this is a known WebKit bug. Let's hope it gets fixed soon!
The ::selection pseudo-element allows one to style the selected text. This works as expected but not for textareas and inputs in Google Chrome 15.
(I'm not sure if it's a webkit or chrome issue since I can't use Safari on Linux.)
Here's a jsfiddle demonstrating this issue: http://jsfiddle.net/J5N7K/2/
The selected text at the pargraph is styled as it should be. The selected text in the textarea and input isn't. (But it is at Firefox.)
Am I doing something wrong or is it just not possible to style it at Chrome right now?
Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.
Demo: http://jsfiddle.net/ThinkingStiff/FcCgA/
HTML:
<textarea><textarea> Doesn't highlight properly in Chrome.</textarea><br />
<input value="<input> Doesn't highlight properly in Chrome." />
<p><p> Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable><div contenteditable> Highlights just fine in Chrome!</div>
CSS:
textarea, input, p, div {
width: 400px;
}
#div-textarea {
-webkit-appearance: textarea;
height: 32px;
overflow: auto;
resize: both;
}
::selection {
background-color: black;
color: white;
}
Output (Chrome):
This is a known WebKit bug. Sorry, no solution thus far :)
Update: the WebKit bug was fixed on 10/13/2014.
Is there any chance that instead of using CSS pseudo-element you can use some jQuery.
take a look at this http://jsfiddle.net/J5N7K/6/.
if you don't understand the jQuery feel free to ask about it.
use this :
::-moz-selection {
background: var(--blue);
color: var(--white);
}
::selection {
background: var(--blue);
color: var(--white);
}
I am currently doing the front end for a site with looooads of forms, all styled up and looking pretty in IE, but I've just noticed that in Firefox the file input fields aren't responding to any of my styles, all the other types of input fields are fine. I've checked it in Firebug and its associating the correct styles to it, but not changing how it looks.
If this isn't a complete brain fart on my behalf, then is this a known issue in Firefox? And if so, how have I never noticed it before?
Here is a sample of the code.
CSS:
form.CollateralForm input,
form.CollateralForm textarea
{
width:300px;
font-size:1em;
border: solid 1px #979797;
font-family: Verdana, Helvetica, Sans-Serif;
}
HTML:
<form method="bla" action="blah" class="CollateralForm">
<input type="file" name="descriptionFileUpload" id="descriptionFileUpload" />
</form>
I've also tried applying a class to it but that doesn't work either.
Many of the answers above are quite old. In 2013 a much simpler solution exists: nearly all current browsers...
Chrome
IE
Safari
Firefox with a few-line fix
pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/
Style the <label> however you you would like your file upload to be.
Set for="someid" attribute on the label
Create a <input id="someid"> element, that's hidden.
Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.
Firefox requires a very small workaround, which is detailed in this answer.
Firefox can be hacked using the HTML input size attribute:
size="40"
while using a css width to control the full width of the field + button in layout
Let's say you have your input:
<input style="display:none" id="js-choose-file" type="file">
Create a fake button using jQuery.
<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>
Style the above button any way you like. Then:
$("#js-choose-computer").on("click", function() {
$("#js-choose-file").click();
return false;
});
As of Firefox 82, hacks are no longer necessary, per the ::file-selector-button pseudo selector. Current versions of Webkit/Blink browsers (Chrome, Edge, Safari, Opera) don't support it at the moment, but it can be dealt with using the ::-webkit-file-upload-button non-standard pseudo-class.
This way, your HTML can be kept semantic, and no hacks are needed.
Example code from MDN reference above:
HTML
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>
CSS
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
Customformsjs pluggin address this issue on its File module class.
http://customformsjs.com/doc/File.html
http://customformsjs.com/doc/File.js.html
Basicaly it make possible to kind to style File input fields with some restrictions. It work by wrapping it in a container and making it transparent so your click on it. The demo page shows it in action
Use cheat code ( # ) infront of the attribute of css class
say:
form.CollateralForm input,
form.CollateralForm textarea
{
width:300px; //for firefox
#width:200px; //for IE7
_width:100px; //for IE6
font-size:1em;
border: solid 1px #979797;
font-family: Verdana, Helvetica, Sans-Serif;
}