can anyone explain this please?
So the tool shows that the rgb(250,255,189) is superceded by the salmon (because the rgb is crossed out) YET despite salmon being the one showing, the summary row and the actual colour displayed is the rgb(250...) colour!
It's bad enough that auto-fill css seems to override anything we might want to style but even the Chrome developer tool doesn't seem to know how to interpret it....
I have a rule that is more specific than the user agent stylesheet, the same definition but with the class specified too, yet Chrome's autofill is still winning - any solution?
thanks
You can try -webkit-autofill
input {
background-color: white;
}
/*input:focus {
background-color: grey
}*/
input:-webkit-autofill{
transition: background-color 1s ease-in-out 5000s;
}
body {
background: #333;
color: #fff;
display: flex;
font-size: 2em;
justify-content: center;
}
<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>
I think you are actually having a problem with webkit-autofill. But that color should only appeear if Chrome is auto filling your input fields. Which probably it is.
Take a look at this quote from MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill
The user agent style sheets of many browsers use !important in their :-
webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.
So I guess this could be a problem. Did you try checking out the page in incognito window? So that the Chromes auto-fill feature doesn't turn on?
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.
I have a field in my html page like this:
<input type="text" class="form-control" readonly>
I would like it to look like normal text between <p> tags. Please help me CSS wizards.
you can try this
CSS
input[readonly]{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to use with a class you can try this one
HTML
<input type="text" class="form-control classname" value="Demo" readonly />
CSS
input[readonly].classname{
background-color:transparent;
border: 0;
font-size: 1em;
}
if you want to make the <input> look like inline text (resizing the input element) please check this fiddle https://jsfiddle.net/Tanbi/xyL6fphm/ and please dont forget calling jquery js library
I realise the question is about Bootstrap 3, but it might be good to know that Bootstrap 4 now has this out of the box: https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
in addition to the accepted answer, I found that the following style works a bit better:
input[readonly] {
background-color: transparent;
border: 0;
box-shadow: none;
}
Bootstrap introduces a shadow that one may want to hide.
<input type="text" placeholder="Show your text" readonly style="border: 0px;" />
That should work
Bootstrap 5 has form-control-plaintext class for that:
<input type="text" readonly class="form-control-plaintext" id="email"/>
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
I am using bootstrap 3 & the issue is that label for the checkbox is overlapping the text. I have tried a few thing things but did not work, so if someone can help I will really appreciate it. This is what the code looks like, The class of the form is form-horizontal
<div class="checkbox">
<label class="checkbox-inline no_indent">I have read and agree with privacy and disclosure policy.
<input name="Terms" id="Terms" type="checkbox" ></label>
</div>
It's supposed to be like this with Bootstrap, <input> first and text after. http://jsfiddle.net/sqax02ah/
<div class="checkbox">
<label class="checkbox-inline no_indent">
<input name="Terms" id="Terms" type="checkbox">
I have read and agree with privacy and disclosure policy.
</label>
</div>
You can follow other answers if you do need the checkbox appears at the end.
In Bootstrap the styles expect thecheckbox to be first and then the text and hence a margin-left: -20px is set. For you snippet you need to add custom styles.
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
margin-right: -20px;
margin-left: 0;
}
Fiddle
Try use display: inline-block for .checkbox class, its should to help. Or change position via margin margin-left: 20px;
Is it possible in an HTML form to mark several input elements as readonly or disabled by wrapping them with something?
I know you can set the form itself as disabled for example, but that of course disabled the whole form. I'm thinking something like:
<form>
<input name="not-readonly">
<div readonly="readonly">
<input name="readonly-field-1">
<input name="readonly-field-2">
</div>
<input type="submit">
</form>
Or could this be solved with CSS somehow? Or maybe only with Javascript?
Just found out that you can disable a group of form elements using the fieldset tag. However, it seems to be slightly buggy in certain versions of IE. There also is no support for the readonly attribute, which unfortunately was the one I needed in this case... maybe it'll be added later?
<form>
<input name="not-disabled">
<fieldset disabled>
<input name="disabled-field-1">
<input name="disabled-field-2">
</fieldset>
<input type="submit">
</form>
I'm assuming you know how to disable inputs in the regular way based on the fact that you have 34k rep.
<input disabled="disabled" type="text" name="something"/>
Easily done with jquery of course (example based on your markup)
$('div[readonly="readonly"]').find('input').attr('disabled','disabled');
You can't actually disable an input with css, but you can fake a disabled input with css like:
.fakeinput {
padding: 4px;
font-family: monospace;
font-size: .8em;
color: #aaa;
border: #999 1px solid;
background: fff;
border-radius: 1px;
margin: 5px 0;
box-shadow: inset 1px 1px 2px #ddd;
}
<p class="fakeinput">Pretend Value</p>
javascript
document.getElementById("myText").disabled = true;
CSS
<INPUT NAME="realname" VALUE="Hi There" readonly>
<INPUT NAME="realname" VALUE="Hi There" disabled>