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

您可能感兴趣的

Introduction to code analysis in Rider One of the strengths ofRider is code analysis. Rider comes with over 2400 code inspections that analyze our code at design time, allowing us to in...
CSS Keyframe animation: Hiding element before anim... Is there a CSS way to hide an element and fading it in with a keyframe-animation after x seconds? Or do I need JavaScript/jQuery for that? How to do i...
Text Input with Expanding Bottom Border I was recently asked by a designer to create a text input style like the search input on TripAdvisor . I liked it a lot. I’...
Learning Gulp.js Gulp.js is a task runner that is used to automate tasks such as compiling all your style sheets into a single file, uglifying your JavaScript and so m...
Webpack Loader源码导读之css-loader 原文地址: Webpack Loader源码导读之css-loader 在上一篇 Webpack Loader源码导读之less-loader 我们介绍了less-loader 本篇是Webpack Loader源码导读系列中关于css-loader的解读,主要阐述...