I have a created a few forms and I can't fgure out why in certain browsers and operating systems, my input buttons appear differently.
Check out the input button here: http://www.41q.org/admin
It's should appear as a square, but instead I get a round corder default button. Can;t figure this out. My CSS is not working.
Should I change the TYPE?
Erik
Try using normalize.css (http://necolas.github.com/normalize.css/) or reset.css (http://meyerweb.com/eric/tools/css/reset/). Then optimize for each browser.
This is probably an IE problem.
I like to define the body font family or font styles with the input, option, textarea, etc tags, like this:
body, input, select, option, textarea {
color: #fff;
font-family: arial;
}
Related
I realize this sounds absurd, but I'm unable to change the font-family for an input type=submit button.
I've tried referencing it by id and input[type=submit], adding a !important tag in the css, and changing it in the dev tools, but nothing works. However, other css attributes are working (such as width, margins, etc).
Is there a css solution I'm overlooking here or should I change paths and style through jquery?
codepen:
http://codepen.io/blakeface/pen/mEJWQj?editors=1100
#submit-button {
font-family: cursive;
font-size: 10em;
margin-top: 30px;
}
Similar question:
Input password font -family
Perhaps you are looking for something more like this?
font-family: Vivaldi;
The 'cursive' font family for HTML/CSS isn't like conventional cursive handwriting. Your code works and displays 'cursive' font.
I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.
Here's another SO question about the issue.
ace editor cursor behaves incorrectly
My problem may have something to do with using a Bootstrap theme, but I'm not entirely sure.
When I open chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template is using the fonts
input, textarea, input[type="submit"]:focus, div {
outline: 0 none;
font-family: 'Open Sans', sans-serif;
}
If I add to my css
.ace-editor {
font-family: monospace !important;
}
I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.
Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.
If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works.
Going to the computed properties, is shows the font-family to once again be 'Open Sans'.
So the question I'm trying to answer, is how can I either figure out what font is ACTUALLY being used when I cancel out the textarea entry from Bootstrap? Or why is this not accepting the monospace font when it is specified.
I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.
The issue is caused by div included in bootstrap rule.
It is too broad and breaks character width measurements for ace.
You can add
.ace_editor div {
font: inherit!important
}
as a workaround. Would be good to also report an issue to the creator of your bootstrap template.
What is default font style of textarea in chrome? What should to make it default look like?
Purpose of my question is that I wanna make the text make same in input as in textarea. In text input is maybe too "bold" :P The question should be: What are default font properties applied on textarea? What would I wrote if I wanna look like as default?
textarea {
font-???: ???;
etc.
}
To answer your question directly,
The default font property of a textarea is font-family: monospace
While the default font property of a input is font-family: Arial.
All the default styling properties of an element (in Chrome) can be found by looking at the computed styling of the element in the Chrome developer tool. For all the properties, view this (example)
As mentioned in another answer, you can force textarea to inherit the font style, to make it look like default:
textarea {
font-family: inherit;
}
I have a drop down box on a web page, using the HTML5 <select> tag. There are times where I want to make it "read only", that is display it as text only. For example:
Sometimes I want it to be "read/write":
And other times I want it to be "read only":
I would prefer not to use the "disable" attribute. I think it looks tacky, and implies that there is somehow a choice to the user when none is available.
Is it possible to transform the look of the current option for a select into normal text using CSS?
Yes, use the CSS:
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
/* needed for Firefox: */
overflow:hidden;
width: 120%;
}
example:
http://jsfiddle.net/eG3dS/
Because of the "needed for Firefox" section, you will need to make a div or span that constrains the select box size. It's too bad FF doesn't respect moz-appearance here.
Note that even though this makes it look like normal text, it is still a working select box! You will need to disable it some way, either by using the "disabled" attribute and changing the font color or otherwise.
In WebKit you can do it using -webkit-appearance: none;
select {
-webkit-appearance: none;
border: none;
}
Demo: http://jsfiddle.net/ThiefMaster/56Eu2/2/
To prevent the user from actually using the selectbox you need to disable it (disabled attribute).
Be warned that this is highly non-standard and does not work with -moz-appearance for example! Thebehavior of the -*-appearance property differs in various browsers and Mozilla even recommends not using it on websites at all:
Do not use this property on Web sites: not only is it non-standard, but its behavior change from one browser to another. Even the keyword none has not the same behavior on each form element on different browsers, and some doesn't support it at all.
I think the easiest thing would be to have a span next to your select, and use an event listener on the select to copy its text into the span, and toggle whether the select or the span is visible. It's a bit of Javascript but it will give you a lot of control.
You could create a custom drop down and have a disabled state, styled with CSS.
There is a really good jQuery plugin that you can set this up with: http://uniformjs.com/
I have an inputfield that should exactly look like the normal body-text.
It does not have anything special specified. In my css reset I have this …
input, textarea, button, select {
margin: 0;
font-size: 100%;
line-height: normal;
vertical-align: baseline;
}
The text inside the input field is bigger than the one above … see my example screenshot. The lower line is an inputfield, the upper line normal text.
This occurs in all browsers. If I would change the font-size for inputs to 97% it would be about right. However I simply don't get why text-inputs resize the font-size?
any thoughts on that?
You need to set font-size on the input too as it won't inherit it from the body directly.
This is because newer browsers will use it's own base stylesheet to format the inputs.
http://jsfiddle.net/mjPE9/ (default font in firefox will be serif, but inputs will always get a sans-serif font if not specified differently)
If you use Firebug you can see all this User agent styles the browser sets if you check Show user agent styles in the Style tab dropdown. The file used is forms.css - you can easily find it on your system and check what it's happening behind the scenes if you do a search.
Guess this might help you. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_size