I am trying to make a textarea but I want to make it so the user cannot make it bigger or smaller. I still want them to be able to type in it. Just not control the textarea with the little control button in the bottom right corner. Any suggestions?
You will need to set the resize property of your textarea to none:
textarea {
resize: none;
}
textarea {
resize: none;
}
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
use this:
textarea { resize: none;}
you can do this with resize: none set on textarea
Related
The problem
I cannot alter the way in whcih the HTML below is output, but I do need to amend the way in which it is displayed. I know I can achieve my desired results with jQuery, but I'd like to do it with pure CSS possible?
What exactly I need to do
I need to show the input from the HTML below, but the label itself is superfluous. The tag can stay or go, I'm not bothered by that, but Username and <br> need to be gone.
Obviousely I cannot use label[for="user_login"]{ display: none; }, as this will fail because it will hide everything within the selector.
The original HTML
<label for="user_login">
Username
<br>
<input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>
The desired HTML
<label for="user_login">
<input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>
jQuery approach
$(document).ready(function(){
var username_label = $('label[for="user_login"]'),
username_input = username_label.find('input');
username_label.html(username_input);
});
Why I don't want to use jQuery
The login for in question is displayed differently depending on screen size. On smaller devices I requre the labels hidden (to save space), while on larger screens the label should still be visible. Using the jQuery approach will remove the labels in both cases.
While I know I can check the screen widht on load, and then use resize event (if necessary), should the screen size change (on a tablet, portrait to landscape for example) the labels could be removed and then not visible when they need to be.
Question
Can I achieve this result (or similar) with pure CSS?
Try this css:
label {
visibility:collapse;
}
label input {
visibility: visible;
}
Here is a jsfiddle:
http://jsfiddle.net/entgqjzk/
I modified the css I found at Hide text node in element, but not children
edit:
This doesn't remove the whitespace as you indicated.
I can't come up with anything better than a combination of jQuery and css, it's not the most beautiful code ever but it does work for this situation in which you don't have control over the html:
http://jsfiddle.net/entgqjzk/2/
The css class "hidden-for-mobile" could be used for example combined with a seperate stylesheet for mobile devices (or pseudo selectors for different screen sizes)
Have you tried pseudo classes? http://css-tricks.com/a-call-for-nth-everything/
Thanks to #geoffreydv for the idea of using visibility.
In conjunction with that, I was able to use the CSS below to effectively hide the whitespace occuped by the text within the label.
body.login #loginform label[for="user_login"],
body.login #loginform label[for="user_pass"]{
display: inline-block;
height: 50px;
position: relative;
visibility: collapse;
width: 300px;
}
body.login #loginform input#user_login,
body.login #loginform input#user_pass{
margin: 0;
position: absolute;
top: 0;
visibility: visible;
width: 300px;
}
textareas are expandable (bottom right corner there is a hook).
How do I make a textarea solid/un-expandable?
Preferably through HTML.
You can use this in your CSS:-
textarea { resize: none; }
textarea { resize: none; }
Is good and does work.
I'm working in this form. Its design is exactly like this:
Right now I'm at this stage, so I am working on some little details:
As you will be able to see, the "Your text..." is stuck to the top left corner of the textarea. I'm trying to find a way to manipulate this via CSS if possible. I just need to apply some margin/padding to the text inside the textarea. If this is not possible with CSS I'm open for suggestions.
How can I manipulate the text inside the textarea via CSS?
You can use CSS padding property:
textarea {
padding: 5px;
}
Use:
textarea {
padding: 5px;
box-sizing: border-box;
}
Note: box-sizing is a CSS 3 property. It's very useful, because without it width: 100% or other will not work as you expected.
You can use CSS to create the desired effect
textarea {
padding: 20px;
margin: 10px;
}
<textarea></textarea>
Yes, the padding from CSS applied to textarea is correct. But then you need to change the "rows" and the "columns" as the dimensions of the whole textarea changes.
You can use the code below:
line-height: _px;
Use the same value as the height of the textarea.
Lately i've been through a lot of times on a single situation problem:
I have a text input element in a web formulary, inside a bigger div with defined width.
Inside that bigger div, i'll put a span text like "Name: " and then i'll put the input.
I want the input to auto become as much as wider the space of the div that the span is not using.
The code would be something like this:
<div>
<span>Name:</span>
<input type="text" name="name" />
</div>
And the CSS:
div {
width: 200px;
display: block;
}
span {
display: inline-block;
font: 11px 'Lucida Sans', Verdana, Arial;
}
input {
height: 20px;
width: auto;
display: block;
}
I've been doing some research, but i seem unable to find a precise solution for this problem.
So far i've been skipping this problem by putting a inline style defining a different width for each element. But if i change the font, size, or whatever, it'll explode.
I don't like to build a fortress wall and leave it full of holes for snipers. That's why i'm looking for help :)
If you guys have any suggestion, solution or workaround way, I'd be glad to know. =D Thanks.
Semantically it's better to use label tags for this purpose:
<label>Name:</label>
Concerning your question, take a look at the CSS3 flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Or if you prefer a video: http://www.youtube.com/watch?v=-OubGOxKa5I
At the time of writing, Mozilla and Webkit support this and there is a fallback for other browsers: https://github.com/doctyper/flexie
Sorry, but it's not possible with that markup. Actually the only way to do it is to shudder use tables (or display: table-cell, etc but that doesn't work in IE7 or earlier). It also generally looks better to have all the inputs aligned, don't you think?
Change display: block to display: inline for input and I think it should work.
Here is an example
http://jsfiddle.net/KYvzM/
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.