can i change the style of the input field
<div id="datafeedr-2" class="widget store_widget">
<h3 class="widget-title">
Search Store
</h3>
<div id="wdgt_ss">
<script type="text/javascript">
<!--
/*
* NOTE: This JS code would be much better off
* existing in your theme's header.php file.
*/
function wash( anInput ) { if(anInput.value == anInput.defaultValue) anInput.value = ''; }
function checkWash( anInput ) { if(anInput.value == '') anInput.value =anInput.defaultValue; }
//-->
</script>
<div class="store_search_form" style="border: none;">
<form action="/search/" method="get"><input onfocus="wash(this);"onblur="checkWash(this);" value="Search store..." name="word" pmbx_context="4F13FC2D-6A04-435C-AA7C-7AA2FEF6FC7E">
<input type="submit" value="Go" pmbx_context="E41A706C-6E36-4DE6-B2C3-3DF4B01B1D30">
</form>
</div>
</div><!-- ##CACHE -->
</div>
I have tried to apply the style using class id and input field
like Css
input.store_search_form
{
code
}
but it didnt work
i need this search bar style to exactly as the default search bar which is above it
Site url
The product search bar is a plugin from www.datafeedr.com
Try this
input[type=search]
/* your style */
input[type=submit]
/* your style */
or add id for inputs
demo:
http://jsfiddle.net/vwyhm/
<input onfocus="wash(this);" onblur="checkWash(this);" value="Search store..." name="word" type="text">
Then just a class to style the width. Add type="text"
Related
I want to remove text off the screen when a checkbox is selected using CSS. I want to know if there's a way of doing this through CSS. Here's some code
<form>
<input id="check" type="checkbox">
</form>
<p> sample text </p>
How do I remove the sample text when the checkbox is selected. I want to achieve this by using CSS.
UPDATE
It's not possible to do it through CSS, so can you tell me if there's a way to do this through JS.
If you can change the HTML to
<form>
<input id="check" type="checkbox">
<p>sample text</p>
</form>
You could use adjacent sibling selector and the checked pseudo class.
/* Remove entire p */
input:checked + p { display:none; }
/* Resize the font to zero */
input:checked + p { font-size: 0; }
/* Indent the text so it is offscreen */
input:checked + p { text-indent: -9999px; }
You can actually achieve this result if you are able to change your structure a bit. You will need to put input and p tag together in the same div so we can target them with CSS.
html:
<form>
<input id="check" type="checkbox">
<p class="hello"> sample text </p>
</form>
css:
input[type="checkbox"]:checked + p {
display:none
}
Here's a solution with JavaScript:
func = () => {
if(document.querySelector("input").checked) {
document.querySelector("p").style.display = "none";
} else {
document.querySelector("p").style.display = "block";
}
}
<form>
<input id="check" type="checkbox" onchange="func()">
</form>
<p>Some Text</p>
Make a little change in your HTML:
<form>
<input id="check" type="checkbox">
<p id="home"> sample text </p> <!-- added an id to the p tag -->
</form>
Create a JavaScript file, lets say 'main.js', inside write the code:
function change() {
var decider = document.getElementById('check');
if(decider.checked){
document.getElementById('home').innerHTML = "";
}
}
Add a script tag to link your JS file to the HTML:
<script type="text/javascript" src="main.js"></script>
I have a page like:
<div class="loginpage-form">
...some stuff
<form>
<div class="flexwrapme">
<input type="text"... />
</div>
<input type="submit".../>
</form>
<!-- DONT apply Style to inputs from form below -->
<form>
<input type="text"... />
</form>
</div>
This is a very basic question, but it's not clear to me : how do I properly style just the input type "text" or "email" within the loginpage-form > flexwrapme containers?
I had the following, but not convinced... :
.loginpage-form .flexwrapme input[type="text"],
.loginpage-form .flexwrapme input[type="email"] {
style stuff...
}
Am I writing this correctly?
Cheers! Pat
you don't need to add .loginpage-form for your style just this will do
.flexwrapme input[type="text"],.flexwrapme input[type="email"]{
your style
}
And one more easy way to do this would be to directly add class to your input elements and styling them
I use bootstrap-datepicker3 from a gem, his Github of bootstrap datepicker
But I use a black bootstrap theme and I don't know how to isolate or change the background color of the datepicker window... It seems to take the background color of the main bootstrap theme.
<div class="form-group">
<div class="col-lg-10">
<span class="input-group-addon">Dates</span>
<div class="input-group" id="datepicker">
<input class="form-control" type="text" name="date_start" data-behaviour='datepicker'>
<span class="input-group-addon">à</span>
<input class="form-control" type="text" name="date_end" data-behaviour='datepicker'>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('[data-behaviour~=datepicker]').datepicker();
});
</script>
I tried a solution but it's for datetimepicker and it doesn't work..
Thank you !
Try overriding the background-color in your CSS:
.datepicker.dropdown-menu {
background-color:#FFF;
}
Try this
<style type="text/css">
.datepicker.dropdown-menu table {
background-color: #FFFFFF;
}
</style>
it works !
I was able to resolve this issue by following the steps provided in the following thread, with one change. I used the ".datepicker .table-condensed" selector.
Reduce size and change text color of the bootstrap-datepicker field
<input type='text' />
I need to add placeholder text in css, something like this:
input:placeholder{content: 'placeholder text';}
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Take a look at this question: How to set placeholder value using CSS?
you cant do this with css. however you can accomplish this with jQuery as shown in the demo below.
$(document).ready(function() {
placeholders();
function placeholders() {
var count = 0;
$('input[type=text]').each(function() {
count++;
$(this).attr('placeholder', 'value ' + count);
});
}
$(document).on('click', '.delete', function() {
$(this).closest('div').remove();
placeholders();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
I want to use the "input with error" styling
as appear here:
http://twitter.github.com/bootstrap/
and after it a custom css only
(relevant row is 722
form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
color: #b94a48;
}
)
My markup:
<div id="new_folder_name_div" class="clearfix error">
<label for="new_folder_name">Name </label>
<div class="input">
<input class="medium error" id="folder_name" size="15" type="text" />
<span>*</span>
</div>
An image:
but I see with Chrome console the input element isn't matched with the above css role.
Any idea why ?
The actual input is the next line down. Note that the containing div with classes "clearfix error" is required.
form .clearfix.error input, form .clearfix.error textarea {
color: #B94A48;
border-color: #EE5F5B;
}
<div class="clearfix error">
<div class="input">
<input class="xlarge error" type="text">
</div>
</div>
Try using
$('#folder_name').closest('.clearfix error').addClass('error');