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!阅读原文】。感谢您的支持!

您可能感兴趣的

Grayscale on only part of an image? Is it possible in css to make only part of an image grayscale? I have tried using filters to no avail, can't seem to ...
Displaying CSS Breakpoint Information with Generat... In the course of experimenting with an example design for my talks at An Event Apart this year, I came up with a way...
CSS: use not: to exclude not only div, but also al... I want to use the not: so it will exclude ALL the p elements within the div2 element. This is the html file:
Font-Weight CSS Transition in Chrome Trying to get font-weight to gracefully transition from '400' to '600' using CSS but it doesn't appear to be worki...
这可能是vue-cli最全的解析了…… 相信很多vue新手,都像我一样,只是知道可以用vue-cli直接生成一个vue项目的架构,并不明白,他究竟是怎么运行的,现在我们一起来研究一下。。。 一、安装vue-cli,相信你既然会用到vue-cli,自然node环境是OK的...