I need add border to div after focus on child element:
html
<div class="header_search col-lg-5">
<form role="form" action="hledat.php" method="get">
<input type="text">
</form>
</div>
css
.header_search {
border: 0px;
}
.header_search input:focus < div {
border: 1px solid white;
}
but that is not working
You can now do this in pure CSS so no JavaScript is needed.
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.header_search:focus-within {
border: 1px solid white;
}
The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.
You can check which browsers support this http://caniuse.com/#search=focus-within
I'm a little altered your example
Live Demo
HTML
<div class="header_search col-lg-5">
<form role="form" action="hledat.php" method="get">
<input type="text">
</form>
</div>
CSS
.header_search {
border: 0px;
}
.header_search input:focus {
border: 1px solid white;
}
Related
This question already has answers here:
Changing the color of an hr element
(27 answers)
Closed 2 years ago.
I have to use <hr> tag inside form, but I can't change color of it. In usual <div> I can change color for that tag in CSS but when I put it inside <form> - CSS doesn't work and whole properties of <hr> are set default. Someone know why?.
.EDIT
Yes, I use bootstrap.
<div class="col-lg-6">
<div class="box-element" id="form-wrapper">
<form id="form">
<div class="user-info row">
<div class="col-md-6">
<input required class="form-control" type="text"
placeholder="Name...">
</div>
<div class="col-md-6">
<input required class="form-control" type="text"
placeholder="Email...">
</div>
</div>
<h6>
Shopping information:
</h6>
<hr/>
<div class="shopping-info">
</div>
<input type="submit" value="Continue"
class="btn my-btn btn-block">
</form>
</div>
</div>
Set border-color of the <hr> tag.
form hr {
border-color: blue;
}
<form>
This is form with an underline
<hr>
</form>
Can you share your CSS and HTML code with us?
Properties of an hr tags are (or just default properties):
hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #EEEEEE -moz-use-text-color #FFFFFF;
border-style: solid none;
border-width: 1px 0;
margin: 18px 0;
}
You can use the border property to style a hr element like this:
/* Red border */
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
/* Thick red border */
hr.new4 {
border: 1px solid red;
}
/* Large rounded green border */
hr.new5 {
border: 10px solid green;
border-radius: 5px;
}
For more info about the hr tag please check w3school
I've the following HTML
<form>>
<div class="form-group">
<div class="search-col">
<input type="text" class="form-control">
</div>
<div class="search-col">
<input type="text" class="form-control" >
</div>
</div>
</form>
<form>>
<div class="form-group">
<div class="search-col1">
<input type="text" class="form-control">
</div>
<div class="search-col1">
<input type="text" class="form-control" >
</div>
</div>
</form>
I want to over-ride the behaviour of form-group and form-control of class search-col, but not of search-col1. How can I do that?
this is what I'm trying
.form-group .form-control .search-col{
outline: none;
background-image: none;
-webkit-background-size: none;
-webkit-box-shadow: none;
-webkit-transition-duration: none;
}
Your order is wrong on your selectors. It should be:
.form-group .search-col .form-control {...}
CSS targets in the order of the parent/child relationship of the DOM elements. This is basically saying style the .form-control class inside of the .search-col class that is inside of the .form-group class.
Your HTML structure does not match your CSS selector.
It should be:
.form-group .search-col { ... }
Or, for that matter, it could even be:
.search-col { ... }
Are you trying to style the individual containers? As others have pointed out ensure the order of the selectors is correct. You shouldn't really have to 'override' anything, as the styles are not the same in each section. I've included a sample image below.
.form-group {
background-color: #ccc;
padding: 20px;
}
.form-group {
padding: 10px;
margin: 5px;
border: 2px solid black;
}
.form-control {
background-color: #abc;
}
/* Notice how each class gives a different style */
.search-col {
background-color: #75AD63;
padding: 10px;
}
.search-col1 {
background-color: #A1D490;
background-origin: ;
padding: 10px
}
If you want to override a specific element which is a child of another div, you can use the right angle bracket to select them like I did below. The image connected is the output.
.form-group > .search-col > .form-control {
background-color: red;
}
Example Styling
Notice how I didn't change the original style of the form-control class.
How to cancel the blur effect of the HTML textbox when focus on it?
<input type='text' style="background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; "></input>
You have to use CSS on the input element on focus to eliminate that "blur" effect that you're talking about. Take a look at this JSFiddle for an example.
http://jsfiddle.net/qfr8eng1/1/
HTML:
<input type="text" id="noeffect" value="look at me!"/>
CSS:
#noeffect
{
background-color: #33ccff;
color: #AD8C08;
border: 1px solid #ffffff;
}
#noeffect:focus
{
outline: none;
}
try it......
.onfocus { background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; }
.onfocus:focus { background:none; }
<input type='text' class="onfocus"></input>
Very quick and basic question but one I can't seem to find the answer to online.
In CSS, is it possible to style a "submit" based purely on the form it is in? Furthermore is there any reason to not do this, and instead to use an specific name like #subit_search_form
Of course it is. Lets say your form has an id of MyForm, your CSS would look like this:
#MyForm button
{
}
Here is a working example
this will style all button elements with the form with id MyForm.
depends on what hooks you have to style...
give the form an id and then...
<form id="certain-form" >
...
<button type="submit">Your Button</button>
</form>
The css:
#certain-form button { ..your unique styles.. }
Yes it is Possible.
Here is the Solution.
The HTML:
<form>
<label>
<input type="button" value="Button" class="button"></input>
</label>
</form>
OR
<form>
<label>
<input type="submit" value="Button" class="button"></input>
</label>
</form>
The CSS:
.button
{
border-top: 2px solid #a3ceda;
border-left: 2px solid #a3ceda;
border-right: 2px solid #4f6267;
border-bottom: 2px solid #4f6267;
padding: 10px 20px !important;
font-size: 14px !important;
background-color: #c4f1fe;
font-weight: bold;
color: #2d525d;
}
Hope this Helps.
EDIT
If you want to target using specific attribute. Here is the Solution.
The CSS Change
input[type="submit"]
{
border-top: 2px solid #a3ceda;
border-left: 2px solid #a3ceda;
border-right: 2px solid #4f6267;
border-bottom: 2px solid #4f6267;
padding: 10px 20px !important;
font-size: 14px !important;
background-color: #c4f1fe;
font-weight: bold;
color: #2d525d;
}
Alternatively this also can be used.
I just want to share, although your problem have been resolved..
If you want to add style to submit instead to use specific name of form like #subit_search_form, You could use jquery selector form with name and input with type to add css style.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("form[name=subit_search_form] input[type=submit]").css({
"background-color": "#FE9900",
"font-weight": "bold",
"font-family": "Arial,Helvetica,sans-serif",
"border": "1px solid #000066",
"cursor": "pointer"
});
</script>
<form name="subit_search_form">
<input type="submit" name="submit" id="submit" value="Search" />
</form>
jsffile
But I prefer with solution from #musefan, using button
What's the easiest way to remove the border lines of a <fieldset>?
I mean a cross-browser solution... is that possible ?
fieldset {
border: 0;
}
fieldset {
border:0 none;
}
(In regards to Marko's comment)
As far as positioning/styling the <legend>, I hide the <legend> (still put one in there just to be semantic), and position/style an <h2> instead. I find this setup gives me nice styling options for my fieldsets.
JSFiddle Link: http://jsfiddle.net/axYQs/
fieldset {
border: 2px solid gray;
padding: 1em;
float: left;
font-family: Arial;
}
legend {
display: none;
}
h2 {
border-bottom: 2px solid gray;
margin: 1em 0;
}
p {
margin: 1em 0;
}
<fieldset>
<legend>Enter Name</legend>
<h2>Enter Name</h2>
<p>
<label for="name">Name:</label>
<br />
<input type="text" name="firstname" id="name"/>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</fieldset>
Here is a quick easy effective way to style it..
assign a class or id to the fieldset element then style it in css.
<fieldset class="fieldset">
or
<fieldset id="fieldset">
css.fieldset {
border: none;
}
or
fieldset {
border: none;
}