...

View Full Version : How to disable css for input field



cash1981
05-21-2007, 11:07 AM
Hello.

There is a css form which is defined for the entire web domain.
It is defined as #reports input { ... }
Now I want my input field not to use css at all. How can i do that.

I have tried

<input style="none" ... /> <-- didnt work
<input class="someClassThatDoesntExist" ... /> <--- didn't work
<input id="someIdThatDoesntExist ... /> <--- didnt work

I have tried googling, but couldnt find the answer. Does anybody have a clue how I can fix it?

zro@rtv
05-21-2007, 11:29 AM
I believe the best way would be to define the style attributes you wish it to have. Being that relying on browser defaults is not consistent.

Also note that the specificity that you are referring to is in fact overridden by the last example you noted at the very least.

some properties would take 'none' or 'normal', etc. but it would depend on the property.

Whats the definition you are trying to override? Whats the implementation? It seems like you should lessen the specificity of the problematic definition. Do you not have access to it? Are you trying to violate some imposed style? (i.e hide a form that is mandatory as per the TOS of some service?)

http://www.google.com/search?q=specificity+css

felgall
05-21-2007, 11:29 AM
You can't remove styles, only change them. Set the styles to how you want it to look.

cash1981
05-21-2007, 02:09 PM
I believe the best way would be to define the style attributes you wish it to have. Being that relying on browser defaults is not consistent.

Also note that the specificity that you are referring to is in fact overridden by the last example you noted at the very least.

some properties would take 'none' or 'normal', etc. but it would depend on the property.

Whats the definition you are trying to override? Whats the implementation? It seems like you should lessen the specificity of the problematic definition. Do you not have access to it? Are you trying to violate some imposed style? (i.e hide a form that is mandatory as per the TOS of some service?)

http://www.google.com/search?q=specificity+css

Well basically the css goes like this:


#reports input{
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
width: 60px;
}

Now I would like to disable the width for my inputs. But I cannot remove it from the css, because then other inputs will get ugly.
Any clue on how to do this?

cash1981
05-21-2007, 02:18 PM
You can't remove styles, only change them. Set the styles to how you want it to look.

But how? As I have written the input style has already been set, and I cannot change that. But I don't want it to be applied to my input fields.

OutThisLife
05-21-2007, 03:37 PM
But how? As I have written the input style has already been set, and I cannot change that. But I don't want it to be applied to my input fields.

Make classes for the input fields, set them to how you wish for them to look.

<input type="class"> ...

It should override with the input{} in the CSS file.

cash1981
05-21-2007, 03:51 PM
Make classes for the input fields, set them to how you wish for them to look.

<input type="class"> ...

It should override with the input{} in the CSS file.

Ok, so basically I need to create a new class in the css. But I tried to do that using #reports something {}
and added that to the input field. But still it used the "mother" one. So what you are saying is that I basically should input some values there? I can't just have blank so that it uses the default one?

cash1981
05-21-2007, 03:57 PM
Bah still doesn't work. Ok here is my code snip:



#reports input{
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
width: 60px;
}
#reports input.large{
width: 250px;
}
#reports input.submit{
width: 70px;
font-weight: bold;
}
#reports input.submit2{
width: 150px;
}
#reports input.small{
width: 50px;
}
#reports overrideInput {
width: 10px;
}




<div id="reports">
<div id="top">
<ul>
<li><a href="../index.jsp">Søk</a></li>
<li><a href="../index.jsp?form=addReport">Ny rapport</a></li>
<li><a href="../index.jsp?form=addCompany">Nytt firma</a></li>
<li><a href="admin/index.jsp" class="active">Admingrensesnitt</a></li>
</ul>
</div>

<br/>
<br/>
<br/>

<reports:listCompanies var="companyList" />
<table>
<tr>
<th align="left">Firmanavn</th>
<th align="center">Rediger</th>
<th align="center">Slett</th>
</tr>
<c:forEach var="company" items="${companyList}">
<tr>
<td><a href="../index.jsp?action=search&companyId=<c:out value="${company.id}"/>&year=all"><c:out value="${company.name}"/></a></td>
<td>
<form name="editCompanyForm" action="editCompany.jsp" method="POST">
<input class="overrideInput" type="hidden" name="companyId" value="<c:out value="${company.id}"/>"/>
<input class="overrideInput" type="hidden" name="returnpage" value="index.jsp"/>
<input class="overrideInput" type="image" src="images/edit.png" border="0" alt="Rediger selskap">
</td>
</form>
<td>
<form name="removeForm" method="POST" action="deleteCompany.jsp">
<input class="overrideInput" type="hidden" name="companyId" value="<c:out value="${company.id}"/>"/>
<input class="overrideInput" type="hidden" name="returnpage" value="index.jsp"/>
<input class="overrideInput" type="image" src="images/delete.png" border="0" alt="Slett" onclick="document.removeForm.action=(confirm('Er du sikker på at du vil slette?\nNB: Alle rapporter til selskapet blir også slettet'))?'deleteCompany.jsp':'?';" />
</form>
</td>
</tr>
</c:forEach>
</table>
</div>


Here I put the class in the input but it still uses the #reports input style :confused:

Arbitrator
05-21-2007, 06:06 PM
and added that to the input field. But still it used the "mother" one. So what you are saying is that I basically should input some values there? I can't just have blank so that it uses the default one?You can if you remove the default style rule or the relevant part of it. You don’t want a width specified, so why not just remove the width: 60px declaration?


Bah still doesn't work. Ok here is my code snip:Why are you setting a fixed width that you don’t want? According to your code, you don’t want it for any of the six input elements.

Based on your code, you can use the following CSS to return the width to the default. The better alternative would seem to be to not declare a width in the first place though; then you wouldn’t need to use the below code.

#reports input { width: auto; }
/* if that doesn’t work, try */
#reports input { width: auto !important; }You can’t “disable” the width or any other CSS property, by the way. You can only restore the default value. In this case, the default value is auto.

That said, your code looks like it could use some improvement. For example, some things like the align attribute could be converted to CSS and you could use more semantic class names that describe the content instead of what you want to do with it presentation‐wise; a name of overrideInput seems to be equivalent to overrideInputPresentation as far as meaning goes.

cash1981
05-21-2007, 07:01 PM
Why are you setting a fixed width that you don’t want? According to your code, you don’t want it for any of the six input elements.


The reason why this is set is because it is used somewhere else on the domain. So I need to figure out how I can change this, preferably auto for just those input fields I have put the other class for.

Hope I cleared things up.

_Aerospace_Eng_
05-21-2007, 07:29 PM
We need you to post the generated html, not the html with the server side stuff in it. A link would be preferred. Quit having us guess. Help us help you.

felgall
05-21-2007, 10:09 PM
Anything set dor an id is more specific than whatever is set for a class and so takes precedence.

cash1981
05-22-2007, 09:47 AM
We need you to post the generated html, not the html with the server side stuff in it. A link would be preferred. Quit having us guess. Help us help you.

Sure here is the generated HTML code.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin grensesnitt</title>
<meta name="generator" content="Eclipse" />
<meta name="author" content="Shervin Asgari" />

<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="/intranet_news/include/css/intranet_news.css;jsessionid=795622D6C4BFCC2FBE368F07A6537614" media="screen"/>
</head>
<body>
<h3></h3>
<div id="reports">
<div id="top">
<ul>

<li><a href="../index.jsp">Søk</a></li>
<li><a href="../index.jsp?form=addReport">Ny rapport</a></li>
<li><a href="../index.jsp?form=addCompany">Nytt firma</a></li>
<li><a href="admin/index.jsp" class="active">Admingrensesnitt</a></li>
</ul>
</div>

<br/>
<br/>
<br/>

<table>
<tr>
<th align="left">Firmanavn</th>
<th align="center">Rediger</th>
<th align="center">Slett</th>

</tr>

<tr>
<td><a href="../index.jsp?action=search&companyId=17&year=all">444</a></td>
<td>
<form name="editCompanyForm" action="?form=editCompany" method="POST">
<input class="overrideInput" type="hidden" name="companyId" value="17"/>
<input class="overrideInput" type="hidden" name="editCompany" value=""/>
<input class="overrideInput" type="image" src="images/edit.png" border="0" alt="Rediger selskap">

</td>
</form>
<td>
<form name="removeForm" method="POST" action="deleteCompany.jsp">
<input class="overrideInput" type="hidden" name="companyId" value="17"/>
<input class="overrideInput" type="hidden" name="returnpage" value="index.jsp"/>
<input class="overrideInput" type="image" src="images/delete.png" border="0" alt="Slett" onclick="document.removeForm.action=(confirm('Er du sikker på at du vil slette?\nNB: Alle rapporter til selskapet blir også slettet'))?'deleteCompany.jsp':'?';" />
</form>
</td>

</tr>
</table>


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


And here is the CSS:


#reports{
float: left;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
}
#reports #top{
float: left;
padding: 5px 0px 5px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
}
#reports #top ul{
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-indent: 0px;
list-style-type: none;
}
#reports #top ul li{
float: left;
padding: 0px 0px 0px 0px;
}
#reports #top ul li a{
font-weight: bold;
background: #ece8e1;
color: #374d88;
font-size: 11pt;
padding: 4px 4px 4px 4px;
}
#reports #top ul li a.active{
background: #374d88;
color: #ece8e1;
padding: 4px 4px 4px 4px;
}
#reports fieldset{
float: left;
background: #ece8e1;
padding: 7px 7px 7px 7px;
margin: 5px 0px 5px 0px;
border: 1px solid #cccccc;
width: 480px;
}
#reports label{
float: left;
width: 190px;
font-weight: bold;
overflow: hidden;
}
#reports label.small{
float: left;
width: 70px;
padding: 0px 0px 0px 3px;
font-weight: bold;
overflow: hidden;
}
#reports select, #reports select option{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
#reports input{
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
width: 60px;
}
#reports input.large{
width: 250px;
}
#reports input.submit{
width: 70px;
font-weight: bold;
}
#reports input.submit2{
width: 150px;
}
#reports input.small{
width: 50px;
}
#reports overrideInput {
width: 10px;
}
#reports table{
width: 100%;
float: left;
border-collapse: collapse;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
margin: 0px 0px 5px 0px;
}
#reports table th{
padding: 4px 4px 4px 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
background: #ece8e1;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
#reports table th.left{
border-left: 0;
border-right: 1px solid #000000;
}
#reports table th.change{
border-right: 1px solid #000000;
width: 50px;
}
#reports table td{
border-bottom: 1px solid #000000;
border-right: 1px solid #cccccc;
}
#reports table td.left{
border-left: 0px;
border-right: 1px solid #000000;
}
#reports table td.change{
border-right: 1px solid #000000;
width: 50px;
}
#reports table td.small{
width: 25px;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
#reports table.preview{
border: 0px;
width: 450px;
background: #ece8e1;
}
#reports table.preview th{
border: 0px;
background: #374d88;
color: #ece8e1;
font-size: 12pt;
text-align: left;
}
#reports table.preview td{
border: 0px;
color: #000000;
}
#reports table.preview td.border{
border-bottom: 1px solid #000000;
}
#reports h3{
font-size: 12pt;
float: left;
margin: 0px 0px 0px 0px;
padding: 5px 5px 5px 0px;
}
#reports h4{
font-size: 11pt;
font-weight: normal;
float: left;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 5px;
}
#reports h5{
font-size: 11pt;
font-weight: bold;
color: #000000;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

cash1981
05-22-2007, 09:48 AM
Anything set dor an id is more specific than whatever is set for a class and so takes precedence.

Im really noob at CSS, so I can't say I understood what you ment here.

cash1981
05-22-2007, 11:06 AM
I got it to work.

I wrote the CSS as this:



#reports input.overrideInput {
width: auto;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum