Revert CSS width:100% to default?

Hi Experts,

I have a .css file which contains something like this:

    input
    { width: 100% }


That works fine in my HTML, except occasionally, I want one of my many <input> tags to have the default width behaviour (whatever that is).  I know I can do things like:

   <input style="width: 50%" ...>

but I want to know how to get the width to be what it would have been if there was no .css file (i.e. the default width).

Without using a different .css file, how can I revert to the default width for some instances of my <input> tags?

Thanks.
LVL 12
tel2Asked:
Who is Participating?
 
AmickConnect With a Mentor Commented:
If you want the width, margins, padding, etc. that you would have had if you hadn't specified a style, you can use inherit.

This example shows that the second div inherits the body style.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Inherit Example</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div {width:50%;
	 margin:10% 25%;
	 color:blue;}
</style>
</head>

<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. 
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. 
Praesent mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec tellus sed augue semper 
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per 
conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. 


</div>
<div style="margin:inherit;width:inherit; color:inherit">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. 
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. 
Praesent mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec tellus sed augue semper 
porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per 
conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. 


</div>
</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
in the same html file you can put

<style>
  input.textBoxes
  {
     width:50%;
  }
</style>

 <input class="textBoxes">
0
 
tel2Author Commented:
Thanks for your prompt response, gurvinder372.

I'm aware of that, but
I want to know how to get the width to be what it would have been if there was no .css file (i.e. the default width).

I don't know what % to use to get the default width, but I want the default width.

Are you with me?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Gurvinder Pal SinghConnect With a Mentor Commented:
when you say default width, what exactly do you mean?
normally the width of textbox is decided by the 'size' attribute.

You can use innerWidth to get the current width,
http://api.jquery.com/innerWidth/



0
 
Gurvinder Pal SinghCommented:
you can get the same using plain javascript also
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
0
 
tel2Author Commented:
Hi gurvinder372,

Sorry, I forgot to mention I am not using jQuery or JavaScript - just straight HTML & CSS.

Now to your question:
when you say default width, what exactly do you mean?
the answer is:
>> what it would have been if there was no .css file
...and not width specified anywhere.

Thanks.
0
 
Gurvinder Pal SinghCommented:
If you want to specify a width, so that it uses the default width, then it is as good as not specifying a width. Then, don't specify the width.

Let me know if it is mandatory/necessary to specify the width
0
 
tel2Author Commented:
Hi gurvinder372,

I want one of my many <input> tags to have the default width behaviour (whatever that is).
how can I revert to the default width for some instances of my <input> tags?

I have several pages which use the same .css file, but for the occasional instance of an <input> tag, I want the tag to act as if no with was specified.

Sorry - forgot to respond to the following, earlier:
normally the width of textbox is decided by the 'size' attribute
I think 'size' is controls limits the number of characters the textbox can contain.  I'm wanting to size the box itself...only.


Hi Amick,

Well presented.  I think that might be what I want.  I'll have to do some experimenting sometime and get back to you.  Thanks.
0
 
Dave BaldwinFixer of ProblemsCommented:
After reading the W3C HTML 3.2 and 4.0 standards, it appears that there isn't an officially defined 'size' for <input>s.  Most browsers use 'size=20' as the default but that is in the current font also.
0
 
Gurvinder Pal SinghCommented:
<<I have several pages which use the same .css file, but for the occasional instance of an <input> tag, I want the tag to act as if no with was specified.>>

Please make sure that in your css should be applying the width to a class, and not all inputs in general. Then, all you need to do is make sure that your <<occasional instance>> input tag doesn't have that class.
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
This little demo shows that you need to use CSS to control the size of the 'box'.  In this case, CSS overrides the 'size' attribute.  Works the same in all browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Size test</title>
<style type="text/css">
<!-- 
.inp1 {width: 10%} 
-->
</style>
</head>
<body>
<h1>Size test</h1>
<form action="#" method="post">
<input type="text" class="inp1" name="num1" size="10" value="num1" /><br />
<input type="text" class="inp1" name="num2" size="20" value="num2" /><br />
<input type="text" class="inp2" name="num3" size="10" value="num3" /><br />
<input type="text" class="inp2" name="num4" size="20" value="num4" /><br />
<input type="submit" value="submit" />
</form>
</body>
</html>

Open in new window

0
 
tel2Author Commented:
[b]Hi gurvinder372[/b],

> [i]Please make sure that in your css should be applying the width to a class, and not all inputs in general.[/i]
I was aware of that option, but I was hoping to avoid doing that, in order to keep my pages as small as poss (dial-up thinking, perhaps).  I'd rather have:
* 99 input tags with no mention of width/size/class (to keep the bytes down), just picking up the general rule for <input> from the .css file.
and
* 1 input tag doing 'inherit', or whatever is needed to revert the effect of the .css style.

> [i]normally the width of textbox is decided by the 'size' attribute[/i]
>> [u]I think 'size' is controls limits the number of characters the textbox can contain.  I'm wanting to size the box itself...only.[/u]
Sorry - I've just realised, from Dave's post, that I was thinking of the 'maxlength' attribute.  You were right about that.

Forgive me for quoting myself so much in my previous posts, but I did so to show that this info was already in my original post, and it would save both of us time if a bit more time was spent in reading initially.  Next time, perhaps.  Thanks for your time, though.


[b]Hi Dave[/b],

Well said.  Input appreciated.


Thanks to all of you.
0
All Courses

From novice to tech pro — start learning today.