This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
(1 answer)
Closed 4 years ago.
I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?
<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">
<input type="text" class="form-control" placeholder="Enter here" readonly>
In css,
.form-control:focus {
outline: none;
}
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">
Related
I'm trying to set a monospace font to an input, but when autofill kicks in, and switching between autofill dropdown menu options, the font family within that autofill state of the text input doesn't appear as the specified monospace font, please refer to this code and change font family to monospace to portray my issue(I'm using Chrome btw):
Codepen example by CSS tricks
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
/* PRESENTATIONAL STYLES */
body {
background: #333;
color: #fff;
display: flex;
font-family: monospace;
font-size: 3em;
justify-content: center;
}
form {
padding: 50px 0;
width: 50%;
}
<form>
<div class="form-group">
<label for="exampleInputFirst">First Name</label>
<input type="text" class="form-control input-lg" id="exampleInputFirst">
</div>
<div class="form-group">
<label for="exampleInputLast">Last Name</label>
<input type="text" class="form-control input-lg" id="exampleInputLast">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email Address</label>
<input type="email" class="form-control input-lg" id="exampleInputEmail">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
The solution here is input:-webkit-autofill::first-line selector.
It allows you to override default system font (and font size) during mouseover on autocomplete elements.
Here is my partial answer in hopes of helping:
I am having the same problem in Chrome, where I would like to change the font-family inside the input text area on hover of the auto-fill options, but it seems like it's the one thing that won't change.
From my experimenting with changing the autocomplete styles in WebKit, as described in the CSS tricks tutorial and in your code snippet, I can change the border styles, the box-shadow styles, even the font-weight and font-style.
Because I am able to change the other properties of the font inside the text input area on hover, but not the font-family, I'm led to believe that this is either intentional or a bug by Chrome. I also noticed the example on CSS tricks behaves the same way: the font-family is the default on hover, but switches to Lato after it's selected. So, I believe this is expected with Chrome. If I could find some explicit documentation that font-family is not allowed to be changed here, I would be more satisfied, but this is the most I could conclude.
This question already has answers here:
Change Bootstrap input focus blue glow
(21 answers)
Closed 5 years ago.
Is there any way to change/force checkbox glow color on focus?
$(function() {
$('input[type!=hidden]:first').focus();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
Redefine the css :focus property of checkbox:
input[type="checkbox"]:focus {
outline-color: green;
}
<input type="checkbox">
I'm using the range slider from here: http://materializecss.com/forms.html
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
And I managed to change the color of the "thumb" that pops up when you click on the slider by using this:
input[type=range]+.thumb{
background-color: #400090;
}
And normally I can just inspect the element on chrome and get what class I have to change to change its color. For some reasons I can't figure out how to inspect the "dot" in the slider to find what class I have to add to change its color.
This is what I did to change the dot on the slider and the thumb bubble colors.
Screenshot and snippet attached
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<style>
input[type=range]::-webkit-slider-thumb {
background-color: red;
}
input[type=range]::-moz-range-thumb {
background-color: red;
}
input[type=range]::-ms-thumb {
background-color: red;
}
/***** These are to edit the thumb and the text inside the thumb *****/
input[type=range] + .thumb {
background-color: #dedede;
}
input[type=range] + .thumb.active .value {
color: red;
}
</style>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
.noUi-connect {
background: black;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
background: black;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
background-color: black;
}
check out this pen by alexventuraio
you can also do
document.querySelector('.noUi-tooltip').style.background = 'black';
document.querySelector('.noUi-handle').style.background = 'black';
Use querySelector all to change all. CSS [" .noUi-handle{...} and .noUi... "] is not overriding.
I'm new to stack
The easiest way to figure this out is actually by looking through the source code. Hosted here (https://github.com/Dogfalo/materialize/blob/master/forms.html) in line 833 and here (https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss) on Github.
Between this and my Chrome DevTools, I have managed to change the background on the range input to #4286f4(substitute for you color) with this CSS declaration:
.noUI-connect {
background: #4286f4 ;
}
You may need to use the !important flag on the property. This changes the color of the slider between the two .thumb elements.
To change the color of the little "thumbs" on the slider:
.range-label{
background-color: desired-color;
}
If you would like to change the grey-color of the background(area outside selection), use this:
.noUI-background {
background: desired-color;
}
Additional Caveat: This solution was only tested on the noUiSlider implementation: http://materializecss.com/forms.html (scroll to Range section). I have not tested this on a plain HTML range element, and sadly need to get back to work.
EDIT:
Having tried to explore solutions on the plain html range input, it appears that there is tag with the class "value" on the slider, as a child of .thumb. Unfortunately, styling this has not led anywhere, leading me to believe that this is either a :before/:after css property, or that your answer lies between lines 73-83 of the 2nd link in the first paragraph.
This question already has an answer here:
input[type=number] placeholder color in FF29+
(1 answer)
Closed 8 years ago.
Is it possible to style the placeholder of an input field with type number in firefox?
Example code:
<input type="text" placeholder="foo">
<input type="number" placeholder="foo">
css:
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
http://codepen.io/anon/pen/yEtFB
In webkit the placeholder get's styled corretly. (with the webkit prefixed placeholder style)
You can achieve it by using below code. A working Demo
input[type="number"]
{color:red;}
Note:
In chrome it will not reflect until you define a initial value like below.
<input type="number" placeholder="foo" value="5">
Above is what I am trying to create as a login form (although there should be a mirror of 'login' after the right brace that says 'signup'). I'm having trouble getting the objects to line up horizontally as I wish. The second image (below) shows what I have. Yikes.
I obviously don't want the fieldset around it, but I our it there to try and group the username and password fields. Here is my code thus far. The HTML:
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
<script type="text/javascript" src="{{ STATIC_URL }}jquery1-6.4.min.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}login.css" type="text/css"/>
</head>
<script>
function login(){
if($('username').text === '') alert('Please enter your username');
else if($('password') === '') alert('Please enter your password');
$('loginForm').submit();
}
</script>
<body>
<img src="{{ STATIC_URL}}logo.png" class='center'>
<br/>
<span class='login_signup_button'>
<a title='click to login' onClick='login()'>
login
</a>
</span>
<form method = 'POST' action='login' id='loginForm'>
<fieldset>
<label for="username">username</label>
<input type="text" id="username" face="helvetica"/>
</br>
<label for="password">password</label>
<input type="password" id="password" face="AmericanTypewriter"/>
</fieldset>
</form>
<span class='login_signup_button' value='submit'>
<a title='signup for omnicloud' href='signup' class='login_signup_button'>
signup
</a>
</span>
</body>
and the CSS (which is imported into the HTML):
#font-face{
font-family:AmericanTypewriter;
src:url('AmericanTypewriter.TTF');
}
body{
background-color:rgb(48,94,255);
}
image.center{
/*display: block; */
margin-left: auto;
margin-right: auto;
width:500px;
}
/* Used for braces */
h1{
font-family:AmericanTypewriter;
font-size:234pt;
color:rgb(249,255,41);
}
/* Used for login, signup, username, password */
p{
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255);
}
fieldset{
border: 10px solid rgb(255,255,255);
width: 500px;
margin: auto;
}
a{
background-color:rgb(48,94,255);
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255);
}
.login_signup_button button{
background-color:rgb(48,94,255);
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255)
border-bottom:0;
border-right:0;
border-top:0;
border-left:0;
display:block;
}
.login_signup_button a:hover{
background-color:rgb(249,255,41);
color:rgb(48,94,255);
}
EDIT: updated code to fix the action of login, added js function, formatted labels for s
Something like this. (Just a rough start).
Note that I'm using an image for the brackets (not seen here). I don't know which version of American Typewriter you're using, but I doubt it will look that thin at that size, and it's probably not worth loading an entire weight of a typeface just for those two characters. Sometimes an image is just better, even though it might not seem as elegant.
Note that I'm a common image replacement technique for the logo. This is better for SEO that simply using an <img> with alt text. (Which you should always include if you choose that route instead.)
Edit: And if you do want to use the font for the brackets, you might try using CSS :before and :after pseudo-classes to add the content around the fieldset or whatever you use as your container for those form elements.
It appears you want to maintain grouping of fields which fieldset provides but not happy with the lines around those fields. If that is the case then you can mark filedset border as none.
fieldset {
border: none;
}
I believe what you are trying to do is to have the input field show next to your text label.
This is how i would write the HTML:
<body>
<img src="logo.png" class="center"/>
<div id="signin">
<form action="path-to-submit" method="post">
<label for="username-field">Username</label>
<input id="username-field" type="text" name="username"/><br/>
<label for="password-field">Password</label>
<input id="password-field" type="password" name="password"/><br/>
<input type="submit" value="Login"/>
Signup for Omnicloud
</form>
</div>
</body>
Because and are inline elements, they will show up next to each-other. Using the br tag will create a line-break for the next set of fields.