Even if I don't really have hope, I want to style bootstrap input-group-addon in css only when the related input is focused. If the input is before the addon, like this:
<input class="form-control" type="email" placeholder="Enter email">
<div class="input-group-addon">#</div>
No problem, a simple :
input:focus + .input-group-addon {
background: $color;
color: white;
}
But assumed it can be placed after as well, if someone has a css based solution in this case, it would be wonderful.
You can't do that using pure CSS but using JQuery you can add these few simple lines to your code:
$( ".form-control" ).focus(function() {
$(this).prev('.input-group-addon').removeClass().addClass('input-group-addon-focus');
$(this).next('.input-group-addon').removeClass().addClass('input-group-addon-focus');
});
$( ".form-control" ).focusout(function() {
$(this).prev('.input-group-addon-focus').removeClass().addClass('input-group-addon');
$(this).next('.input-group-addon-focus').removeClass().addClass('input-group-addon');
});
If your "addon" not placed before or after Control EXACTLY, you can wrap control and addon in a wrapper and modify code using
.parent('.wrapperClass').children('.input-group-addon')
The complete code: JSFiddle Sample
Related
i have this search bar in my application which i want to modify:
Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.
The icon is a SVG i added and styled seperatly.
I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.
Ps.: im an absolute beginner in CSS so please have mercy.
Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.
If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
It's not possible with CSS. You would have to use Javascript.
Javascript
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
it is possible if you wanna do it using only css.
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
<input id="Search" name="Search" type="search" placeholder="Search" />
I have the following style set for labels of a particular form:
#incidentForm label {
font-weight:bold;
width:40%;
vertical-align:top;
}
Which is exactly what I want for my full page form. But for the modal that allows one to update a single field from a report where someone would view the data results, I would like the label for the TEXTAREA ONLY to NOT be limited to the "width:40%". All other input types should keep the "width:40%".
I've been trying to wrap my brain around how to either do a :NOT exception to the existing label style, or somehow set a separate style based on the class of the modal. I.E.:
.updateModal label(that somehow identifies only textareas) {
width:100%;
}
Here is an example of the structure of the update modal itself:
<div id="Return" class="updateModal">
<div id="incidentForm">
<div class="[name of this incident form type]">
<form class="AjaxForm" action="https://blahblahblah" method="post">
<fieldset id="fs1">
<legend>Edit report field</legend>
<div class="field">
<label for="31">This is the label for this text area field:</label>
<textarea id="31" name="31"></textarea>
</div>
</fieldset>
<input value="Update record" type="submit">
</form>
</div>
</div>
</div>
Please note that the id for the textarea and, thus the label for it, are generated dynamically based on the id field of the database the form information is pulled from. All of the field information is stored in a db so I would not be able to generate a specific style definition based on the id of the specific textarea itself. Or at least not that I can think of.
Does anyone have any suggestions?
Thank you very much!
The selector should be like
label[for=xxx]
{
/* ...definitions here... */
}
For multiple, you can make your selector simpler and generalize for modern browsers:
label[for^="3"] {
color: red; //It will apply to all label that starts with "3"
}
Or Simply you can write:
label[for="31"],label[for="32"],label[for="and so on.."] {
color: red;
}
Or For General Label Simply write
label {
color: red; //It will affect to all the label in the page
}
With CSS, the subject of the selector is the last compound selector of the entire selector (https://www.w3.org/TR/selectors4/#subject). In CSS4, there is a new subject selector that will allow this. It looks like: label! + textarea. The ! means that the label selector is the subject of this selector.
Unfortunately, this is not yet implemented in any browsers (http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/). Given that, we only have the ability to look for descendants, children, and younger siblings.
If you have some ability to control your HTML, this gives us a possibility: if we flip the DOM order of the form element and label, then the label becomes the younger sibling of the textarea. This gives us the option of using the adjacent + selector. The visual ordering can be altered by using a reverse-column flexbox. Consider:
<div class="field">
<textarea id="f1">My textarea</textarea>
<label for="f1">My Label</label>
</div>
<div class="field">
<input type="text">
<label for="f1">My Label</label>
</div>
.field {
display: flex;
flex-direction: column-reverse;
margin: 1em;
}
textarea + label {
background: #faa;
}
Demo: https://codepen.io/honzie/pen/weMRam
To summarize: (1) Is it possible in CSS2.1/3? Not with the current HTML. (2) Is it possible with CSS4 (assuming browsers implement it and the spec doesn't change)? Yes, in the future.
Although I don't have any code to work with, if provide some I'll try to include it, it seems to me you should be able to add a CSS class to any label that is being used for a textarea. If backend code is using database info to decide on the element to use for a form field then you can use that logic to add the class, otherwise add it yourself when you write the HTML.
You can use the following to select and attribute of an element:
input[type="text"] {
background-color: yellow;
}
I cannot edit the html code, is the question below possible using only "CSS" code?
How do you add a text just like a placeholder or something to an inputbox?
Here's the input text box code:
<input id="isn_email_address" type="text" name="user" size="40" maxlenth="90">
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Using jQuery you can achieve this : Working DEMO
Note : you will need latest jquery library you can download from here jQuery Library
Try this code :-
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
$('#isn_email_address').attr("placeholder", "Type your text here");
});
</script>
</head>
If you don't want to use placeholder,obviosly there is other way.I don't know wheather it's possible with css alone.But using javascript and css you can definitely do that.
You could use some pseudo elements, assuming you're not supporting IE7 and below.
#isn_email_address {
position: relative;
}
#isn_email_address:after { /*could use :before if you wanted too*/
content: "Type your text here";
display: block;
}
#isn_email_address:focus #isn_email_address:before {
display: none;
}
You'll probably need to do some z-index adjustment to make sure that you're able to select the textfield. Additionally, some css *left: /my value here/* to make sure it's in the right spot.
Strange one,
im trying to apply a style to a textbox that is already using jquery autocomplete, the style im trying to apply doe not work, any ideas?
CSS
#LongTextbox {
width: 250px;
}
HTML
<input name="ItemEntry_item_${id}" type="text" value="${item}" id="ItemEntry_item_${id}" class="LongTextBox"/>
Debug shows
<input name="ItemEntry_item_1" type="text" value="" id="ItemEntry_item_1" class="LongTextBox ui-autocomplete-input" autocomplete="off">
CSS debug shows no sign of LongTextBox being consumed
Your HTML has a class of LongTextBox (capital B) whereas your CSS is targeting an id of LongTextbox (lowercase b).
change CSS to .LongTextBox instead of #LongTextbox
fiddle: http://jsfiddle.net/6Wgxc/
Change your CSS as below. In CSS class is denoted with . and id is denoted by #, further in your CSS code the class name LongTextBox is mentioned as LongTextbox
CSS
.LongTextBox {
width: 250px;
}
I would like to change the color background in the text and input fields of a form, but when I do this it also affects the submit button! Could it be done in some other way that does not affect the button?
I have used this code:
input, textarea {
background-color: #d1d1d1;
}
input[type="text"], textarea {
background-color : #d1d1d1;
}
Edit: working example, http://jsfiddle.net/C5WxK/
The best solution is the attribute selector in CSS (input[type="text"]) as the others suggested.
But if you have to support Internet Explorer 6, you cannot use it (QuirksMode). Well, only if you have to and also are willing to support it.
In this case your only option seems to be to define classes on input elements.
<input type="text" class="input-box" ... />
<input type="submit" class="button" ... />
...
and target them with a class selector:
input.input-box, textarea { background: cyan; }
You want to restrict to input fields that are of type text so use the selector input[type=text] rather than input (which will apply to all input fields (e.g. those of type submit as well)).
you can simply use the button tag with type="submit"
<button type="submit">Submit</button>
besides solving your problem, now you can put HTML inside it(icons for example), rather than using the value attribute to set the text.
If you need to insert a normal button inside a form, use type="button" to prevent it submitiing the form