user1322801
user1322801

Reputation: 859

remove the input box's initial style

I have encoutnered some issues when trying to change the input text box initial style this is the style I have at the moment:

.myInput {
    text-align: left;
    display:inline-block;
    outline: none;
    float: left;
    font-size: 0.8em;
}

And I would like to remove the borders and make the input text to appear at the begining of the input control without any padding/margins that were created by the default input text box style (I have added an image that shows the input text location versus the label's text location)

Thanks :)

Upvotes: 0

Views: 783

Answers (3)

Michelle
Michelle

Reputation: 2712

I don't think it's ever a good idea to declare so many !importants in your code. You're going to wind up running into several errors, because !important doesn't just prioritize-- it overrides aggressively.

You're better off changing .myInputto an ID (#myInput) and targeting the ID. IDs are given higher priority.

#myInput {
  padding: 0px;
  margin: 0px;
  text-align:left;
  border: 0px;
  ...your styles here...
}

If you are using this input more than once, you could try wrapping it as a class under an ID and targeting that instead (#myInput input) I'm also wary about targeting IDs in CSS, but if it's a choice between an ID and !important, I'd scurry for the ID.

The !important command is a lovely hack, but you'll encounter too many problems from overusing it like that. Rule of thumb (and I'm not the only CSS lover on the internet who espouses this): don't use !important unless it is absolutely necessary.

Upvotes: 1

Sowmya
Sowmya

Reputation: 26979

use border:none to remove border and add your custom style

DEMO

Upvotes: 1

james
james

Reputation: 202

if you want to alter/change the default style of the textbox(myInput) try this one.

.myInput{
border:0px!important;
text-align:left!important;
padding:0px!Important;
margin:0px!important;
}

using !important will prioritize your given style hope it would help thanks ..

Upvotes: 1

Related Questions