<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button"/>
</div>
link
some text
link
</form>
</div>
Can I hide some text without adding any tags to html?
I'm trying do smth like that:
div.tree-control form {
display:none;
}
div.tree-control form > div:first-of-type {
display:block;
}
but it will hide all form. How can I hide just text?
You could use the visibility property here.
The visibility property is different than the display property in that it allows a parent element to be hidden and a child to be visible.
div.tree-control form {
visibility: hidden; /* hide the whole form */
}
div.tree-control form > div:first-of-type {
visibility: visible; /* make the first div in the form visible */
}
div.tree-control form {
visibility: hidden;
}
div.tree-control form > div:first-of-type {
visibility: visible;
}
<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button"/>
</div>
some text
</form>
</div>
There is no methods for disabling only the text when you not allow to give a tag.
But there is always a workaround for you.
Changing the color of the text as the same as the background.
Hope this could help you.
<!DOCTYPE html>
<html>
<head>
<style>
div.tree-control form {
color:white;
}
div.tree-control form > div:first-of-type {
display:block;
}
</style>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button">
I am Button
</button>
</div>
some text
</form>
</div>
You can always add text as an element -
<p>Some Text</p>
<label>Some Text</label>
<span>Some Text</span>
Assign and Id or Class and simple display: none; will do.
form span{
display: none;
}
<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button"/>
</div>
link
<span>some text</span>
link
</form>
</div>
Related
I am trying to target what and where, as well as
search.
Here is my html:
<div class="entry-content">
<p> </p>
<div class="entry-content">
<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">What?</label><br />
<input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
</div>
<div class="search_location">
<label for="search_location">Where?</label><br />
<input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
<input name="filter_job_type[]" type="submit" value="search" />
</div>
</div>
<div class="showing_jobs"></div>
<div></div>
<div>
Post A Job
</div>
</form>
</div>
</div>
<p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>
Tried everything including.
.entry-content {color: green;}
Interestingly,
. entry-content {background-color: green;}
works, but
.entry-content {color: green! important;}
does nothing.
you can use the following style to target all the labels inside entry-content. This works unless the style is not overrided by other styles
.entry-content label{
color:green;
}
For specific labels, you can use,
.search_keywords label{
color:green;
}
.search_location label{
color:green;
}
UPDATE
For input fields like chef,manager etc you can use
.search_keywords input{
//Your style here
}
or since you have id for the input field, use
#search_keywords{
//Style here
}
and for the submit button search, you can use the following,
.search_location input[type=submit]{
//style here
}
You can target by attribute and value:
label[for="search_keywords"]{ /* what label*/
background-color: red;
}
label[for="search_location"]{ /* where label */
background-color: blue;
}
input[type="submit"]{ /* search button */
background-color: green;
}
The color attribute refers to the text color, not the background colour.
Try attribute selectors
[for="search_keywords"],
[for="search_location"],
[name="filter_job_type[]"] {
color: green;
}
<div class="entry-content">
<p> </p>
<div class="entry-content">
<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">What?</label><br />
<input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
</div>
<div class="search_location">
<label for="search_location">Where?</label><br />
<input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
<input name="filter_job_type[]" type="submit" value="search" />
</div>
</div>
<div class="showing_jobs"></div>
<div></div>
<div>
Post A Job
</div>
</form>
</div>
</div>
<p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
I have a small box placed at the bottom of the page. I am trying to place a form right above a div but the form keeps jumping into the bootstrap div.
this is the html attempt
EDITTED:
I also want the row across the form to have a background color as thesame with the breadcrumbs but it is not showing
<div style="padding:1px; background-color: #F2F2F2;">
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Group"/>
</form>
</div>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
This is the css controlling the form
form.rightiest {float:right; margin-top:0px; margin-bottom:7px;}
with the above, the form keeps overlapping into the div. Please how can I place the form right above the div.
You need to clear your floats.
.breadcrumb {
clear: both;
}
Clear the float.
form.rightiest {float:right;
margin-top:0px;
margin-bottom:7px;}
.breadcrumb {
clear: both;
}
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Chat"/>
</form>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
Hello I have a wp site with contact forms 7 plugin..
I have set up the form with some checkboxes that have images for the content.. here is the html
Here is a jsfiddle
I am trying to make a border around the image when a checkbox is selected...
<div role="form" class="wpcf7" id="wpcf7-f299-p295-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/apply-for-trial/#wpcf7-f299-p295-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div class="trials-option">
<label>
<span class="wpcf7-form-control-wrap trials-list">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span class="wpcf7-list-item first last">
<input type="checkbox" name="trials-list[]" value="trial 1">
<span class="wpcf7-list-item-label">trial 1</span>
</span>
</span>
</span>
<img src="http://clinics.dsgthemes.com/wp-content/uploads/2016/01/trial-16.png">
<br>
</label>
</div>
</form>
</div>
again, trying to make the img inside label have a border when selected..
I have added a class that makes the checkbox bigger, just for me to verify I am selecting the check box.. the problem is that I am not selecting the img, and I cannot figure out a way to do it.
#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked {
height: 25px;
width: 25px;
}
#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked ~ img {
border: 3px solid #888;
}
tried this way: (but it isn't immediately after the check box..)
#wpcf7-f299-p295-o1 > form > div > label > input[type="checkbox"]:checked + img {
border: 3px solid #888;
}
and many others.. I can't seem to get it, any help?
You can restructure the DOM like so:
HTML
<form action="/apply-for-trial/#wpcf7-f299-p295-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div class="trials-option">
<label>
<span class="wpcf7-form-control-wrap trials-list">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
<span class="wpcf7-list-item first last">
<span class="wpcf7-list-item-label">trial 1</span>
<input type="checkbox" name="trials-list[]" value="trial 1"> <img src="http://clinics.dsgthemes.com/wp-content/uploads/2016/01/trial-16.png">
</span>
</span>
</span>
</label>
</div>
</form>
And then use this selector in your CSS
CSS
.trials-option input[type="checkbox"]:checked + img {
border: 3px solid #888;
}
Demo
https://jsfiddle.net/5L6waw1d/2/
Following is the code :
in this code the 1st box is not coming in a row else other 2 are having no problem
<div class="foo">
<div class="bar">1<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"></div>
</div>
</br>
<div class="bar">2<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"></div>
</div>
</br>
<div class="bar">3<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"></div>
</div>
& the CSS
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 20%;
}
input {
box-sizing: border-box;
}
Help regarding this asap.
Check this Fiddle
CSS:
.foo {
display: block;
width: 100%;
}
.row
{
display:block;
}
.bar {
display: inline-block;
}
input {
box-sizing: border-box;
}
HTML:
<div class="foo">
<div class = "row">
<div class="bar"> 1
<input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"/></div>
</div>
<div class = "row">
<div class="bar"> 2
<input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"/></div>
</div>
<div class = "row">
<div class="bar"> 3
<input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
<div class="bar"><input type="submit"/></div>
</div>
just change the width from 20px to 29.5%
.bar:first-child, input[type="text"] {
width: 29.5%;
}
DEMO:http://jsfiddle.net/LrshX/
use table instead of div. give every input in a
<td> <input type ="text"\> <\td>
tag
Change foo class from display:table to display:inline
I think you are overcomplicating things for no reason. And you have messed up (somewhat) your HTML tags, your CSS styles etc.
What (I believe) you are after, could be achieved (among many ways) like this:
HTML
<div class="foo">
<div class="bar">
1
<input type="text" id="J1" class="textbox"
autocomplete="off" autofocus />
</div>
<div class="bar"><input type="submit" /></div>
</div>
<br />
...
CSS
.foo {
display: table;
width: 100%;
}
.bar { display: table-cell; }
.bar:first-child { width: 20%; }
input[type="text"] { width: 80%; }
See, also, this short demo.
Some additional remarks:
Do not use the same id on multiple elements in your DOM, or you're very likely to experience unexpected behaviour.
If you use autofocus on all text-fields, the ladt one will receive the focus.
If you want your submit buttons to actually do something, don't forget to include them in form or bind them using JavaScript.