I am trying to change the default style of bootstrap checkboxes. I want to add different borders for unchecked, hover and checked. When I try adding a shadow, it works, however border and changing the background color does not work.
input[type="checkbox"]{
width: 20px;
height: 20px;
border: 1px solid #59A29B;
background color: #FFFFFF;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
Example of it not working.
JS Fiddle
Thanks in advance.
Firstly, this is invalid markup:
<input type="checkbox" value="" id="test">
Option one
</input>
This is valid markup:
<label>
<input type="checkbox" value="" id="test" />
Option one
</label>
Secondly, you cannot style checkboxes this way. See How to style checkbox using CSS?
Thirdly, you have some invalid CSS properties. background color should be background-color, but again this will not work (see the link above).
A quick alternative to border here would be to use outline, but this isn't very desirable:
#test{
outline: 1px solid #f00;
}
JSFiddle demo.
Related
I tried all I could think of, using ::ng-deep, but I cannot target the border color during hover!
I can change it correctly in Dev Tools, but I Cannot apply it in the code, the selector seems always wrong!
this is the html:
<mat-form-field appearance="outline" class="userNameInput">
<mat-label>Username</mat-label>
<input matInput #email type="email" placeholder="mail#mail.com" (keyup.enter)="loadUserInfo(email.value)">
</mat-form-field>
by default the hover border-color is black!
Try putting this in your css/scss file,
.userNameInput:hover {
border: 2px solid red;
}
if doesn't work! try,
.userNameInput:hover {
border: 2px solid red !important;
}
Hope this helps 😊
have a look at this,
How do create a form like in the one in Bootstrap 4 http://v4-alpha.getbootstrap.com/components/forms/ in Materialize CSS. The following only shows an underline for the input field and not a containing box?
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
You can override the Materialize CSS styles by using " !important ".
I have made a CodePen to demonstrate the same using the markup given. (https://codepen.io/anon/pen/yzVXWN)
Also note that the I have included the Materialize CSS stylesheet in the CodePen to test this.
You can copy and paste the CSS in between the opening and closing <style> tags
inside the head like this:
<style>
#first_name{
display: block!important;
width: auto !important;
padding: .5rem!important;
border: 1px solid rgb(0,0,0);
transition: all 1s;
border-radius: .25rem!important;
box-shadow: none;
}
#first_name:focus{
border-color: blue!important;
}
label{
color:#9e9e9e!important;
}
</style>
Hope that helps :)
I want to make the button caption bold. But it should not affect the width of the button. i tried font-weight it changes the width of the button.
<input type="button" style="width:10px" class="buttonEnabled">
<input type="button" style="width:20px" class="buttonEnabled">
.buttonEnabled:hover {
font-weight:bold;
}
If you do not want to fix widths or you have multiple width inputs, then you could simulate a faux bolder text by using text-shadow only on hover.
Use 0 for x and y offsets to make the shadow outline the text. Tweak the color to reduce or increase the impact.
Example Snippet:
.buttonEnabled:hover { text-shadow: 0px 0px 1px #333; }
<input type="button" class="buttonEnabled" value="Submit">
Edit: This works in all modern browsers, but will not work with IE < 10.
For old IE, you could use the shadow filter with standard text-shadow as the last rule. Something like this:
.buttonEnabled:hover {
filter: progid:DXImageTransform.Microsoft.Shadow(
color=#333,direction=0,strength=1
);
text-shadow: 0px 0px 1px #333;
}
I haven't tested it though. You may need to tweak it out. More details of this legacy rule is here: https://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx
You can do this (set a min-width):
CSS
.buttonEnabled{
min-width: 100px;
}
.buttonEnabled:hover {
font-weight:bold;
}
HTML
<input type="button" class="buttonEnabled" value="teste">
DEMO HERE
I have a form that the user needs to fill out. The form contains TextInput. The default Adobe Air textboxes are old school styled. I want to modify them so they look more modern. How can I style a textbox so it only has the bottom border line and its fill color is white?
Thanks!
Avi
Shrinivas answer will put a border on the bottom but still shows borders on the side.
If you wanted to hide them you could also color the side borders the same as the background.
On a white background, this will essentially hide the sides and top borders.
Here is the fiddle: http://jsfiddle.net/6swdpe8y/
input{
border-right: white 2px solid;
border-left: white 2px solid;
border-top: white 2px solid;
background: white;
}
<input type='text' />
As stated here (Adobe AIR brings Advanced CSS3 Support to the Desktop), Adobe AIR now supports CSS3.
Also refer this (Manipulating an HTML stylesheet from ActionScript).
Use CSS border.
Check out this fiddle. (bottom border = red)
Here is the snippet.
input,
textarea {
border-bottom: red 2px solid;
background: white;
}
<input type='text' />
<br>
<textarea></textarea>
Check out this fiddle. (only bottom border = red)
Here is the snippet.
input, textarea {
border: none;
border-bottom: red 2px solid;
background: white;
}
<input type='text' /><br>
<textarea></textarea>
My question is about this image. When i have a placeholder in firefox, the cursor ( the vertical bar when we focus the input) turns black instead of white (my font color). [1st Image, it's not easy to see, but i have focus on "Password" input, and there's the black cursor]
If the input does no have a placeholder the bar is white as it should be. [2nd Image]
Is there anyway i can make that bar white?
Thanks
Edit [Code]:
CSS
input, select {
background-color: #232323;
margin: 3px 0px;
padding: 0px 2px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 11px;
}
HTML
<input type="text" name="username" class="right" /><br/>
<input type="password" name="passord" placeholder="Password" class="right" /><br/>
That's the code i'm using, the objective is to make that vertical bar in the top image [password field] be white.
Sadly, this is a bug in firefox. It's been detected in v15, and should be fixed in v19 (that's why it's marked as fixed at the moment):
https://bugzilla.mozilla.org/show_bug.cgi?id=769405
Nothing you can do but wait I'm afraid...