Why do my CSS styles go beyond my online styles?

综合技术 2018-06-25

My
inline width/height is being overridden by my input
styles. Is there a way to correct this? Or will the inline style not work in this situation?

HTML:

CSS:

input {
   width:50%;
   padding:0px;
   outline:none;
   height:36px;
   font-size:24px;
}

You can accomplish this by using more specific CSS selectors like input[type=text]
and input[type=image]
. So if you want the height/width specified in your question to only apply to
, you would do something like this:

Keep the non-height/width properties in the less specific input
selector:

input {
   padding:0px;
   outline:none;
   font-size:24px;
}

Then use the height/width properties in the input[type=text]
selector:

input[type=text] {
   width:50%;
   height:36px;
}

Then you can add a differnet height/width for the input[type=image]
selector:

input[type=image] {
   width: 200px;
   height: 50px;
}

Also, keep in mind that you can make your selectors more specific if you use the id
of the form
in your selectors, like so:

#search input
#search input[type=text]
#search input[type=image]
Hello, buddy!

责编内容by:Hello, buddy! (源链)。感谢您的支持!

您可能感兴趣的

Starter Project This article is the very first article in a series about Starter Project , a...
Effective bundling with ASP.NET MVC Bundling and minification has been available in ASP.NET MVC for a long time. ...
Collective #403 Collective #403 April 2, 2018 View All Publi...
CSS nth-last-child confusion I am really confused with nth-child when I am trying to make something with this...
LESS IS MORE 学习完 css部分,相信大家对通过css进行DOM元素的样式操作已经非常熟悉,也可以通过css的语法进行页面显示效果的添加和修改。如果你们对css报以崇高敬意...