Im creating one simple html page as a firefox default homepage. I got the search function working, but now i want to add style into the page.
This is my funtion:
<form action="" onsubmit="return false">
<input name="term_1" size="38" maxlength="50" value="" id="searchbox" placeholder="Enter search term.."><br />
<select name="field_1" id="option">
<option value="t" selected="selected">Title</option>
<option value="a">Author</option>
<option value="s">Subject</option>
<option value="call_number">Call Number</option>
<option value="p">Publisher</option>
</select>
<input value="Submit" type="button" onclick=search()>
<input value="Reset" type="reset">
</form>
<script>
function search()
{
var search_input=document.getElementById("searchbox").value;// value of search box
var option=document.getElementById("option").value; //value of select
window.open('http://webpac.kdu.edu.my/search/query?match_1=MUST&field_1=' + option + '&term_1=' + search_input + '&facet_loc=20000&sort=relevance&theme=kdu', 'bswindow'); //proceed with search
}
</script>
I would like style something like this
https://www.w3schools.com/code/tryit.asp?filename=GAQ6A12ICCQF
In order to style something, you must apply CSS.
As per WW3 Schools Search Button Styling
I've modified your HTML code in the following ways to achieve this:
Changed your Submit input to type button to permit an inner text item (which is used for the magnifying glass search symbol).
Converted your Reset input to type button for the same reason as above.
Moved your input[type="term1"] after your select to be inline with the styling brief you supplied.
Included a reference to the FontAwesome library in the head so the refresh & magnifying glass symbols can be utilised
Referenced the refresh & magnifying glass symbols in an <i> tag inside the relevant <button's
Here is the updated HTML with CSS:
* {
font-size: 14px;
}
select {
height: 35px;
border: 1px solid grey;
background: #f1f1f1;
}
input[type="text"] {
height: 30px;
text-indent: 10px;
border: 1px solid grey;
background: #f1f1f1;
}
form {
display: flex;
flex-direction: row;
width: 100%;
}
input[name="term_1"] {
width: 100%;
}
button {
width: 100px;
background-color: #2196F3;
border: 1px solid grey;
color: white;
}
button:hover {
cursor: pointer;
background-color: #0b7dda;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<form action="" onsubmit="return false">
<select name="field_1" id="option">
<option value="t" selected="selected">Title</option>
<option value="a">Author</option>
<option value="s">Subject</option>
<option value="call_number">Call Number</option>
<option value="p">Publisher</option>
</select>
<input type="text" name="term_1" size="38" maxlength="50" value="" id="searchbox" placeholder="Enter search term.."><br />
<button type="submit" onclick=search()><i class="fa fa-search" aria-hidden="true"></i></button>
<button type="reset"><i class="fa fa-refresh" aria-hidden="true"></i>
</button>
</form>
<script>
function search() {
var search_input = document.getElementById("searchbox").value; // value of search box
var option = document.getElementById("option").value; //value of select
window.open('http://webpac.kdu.edu.my/search/query?match_1=MUST&field_1=' + option + '&term_1=' + search_input + '&facet_loc=20000&sort=relevance&theme=kdu', 'bswindow'); //proceed with search
}
</script>
Here is a JSFiddle for reference as well.
See W3schools css page for more styles
https://www.w3schools.com/howto/howto_css_searchbar.asp
<div id="cover">
<form method="get" action="">
<div class="tb">
<div class="td"><input type="text" placeholder="Search" required></div>
<div class="td" id="s-cover">
<button type="submit">
<div id="s-circle"></div>
<span></span>
</button>
</div>
</div>
</form>
</div>
*
{
outline: none;
}
html, body
{
height: 100%;
min-height: 100%;
}
body
{
margin: 0;
background-color: #ffd8d8;
}
.tb
{
display: table;
width: 100%;
}
.td
{
display: table-cell;
vertical-align: middle;
}
input, button
{
color: #fff;
font-family: Nunito;
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}
#cover
{
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 550px;
padding: 35px;
margin: -83px auto 0 auto;
background-color: #ff7575;
border-radius: 20px;
box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb;
transform: scale(0.6);
}
form
{
height: 96px;
}
input[type="text"]
{
width: 100%;
height: 96px;
font-size: 60px;
line-height: 1;
}
input[type="text"]::placeholder
{
color: #e16868;
}
#s-cover
{
width: 1px;
padding-left: 35px;
}
button
{
position: relative;
display: block;
width: 84px;
height: 96px;
cursor: pointer;
}
#s-circle
{
position: relative;
top: -8px;
left: 0;
width: 43px;
height: 43px;
margin-top: 0;
border-width: 15px;
border: 15px solid #fff;
background-color: transparent;
border-radius: 50%;
transition: 0.5s ease all;
}
button span
{
position: absolute;
top: 68px;
left: 43px;
display: block;
width: 45px;
height: 15px;
background-color: transparent;
border-radius: 10px;
transform: rotateZ(52deg);
transition: 0.5s ease all;
}
button span:before, button span:after
{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 45px;
height: 15px;
background-color: #fff;
border-radius: 10px;
transform: rotateZ(0);
transition: 0.5s ease all;
}
#s-cover:hover #s-circle
{
top: -1px;
width: 67px;
height: 15px;
border-width: 0;
background-color: #fff;
border-radius: 20px;
}
#s-cover:hover span
{
top: 50%;
left: 56px;
width: 25px;
margin-top: -9px;
transform: rotateZ(0);
}
#s-cover:hover button span:before
{
bottom: 11px;
transform: rotateZ(52deg);
}
#s-cover:hover button span:after
{
bottom: -11px;
transform: rotateZ(-52deg);
}
#s-cover:hover button span:before, #s-cover:hover button span:after
{
right: -6px;
width: 40px;
background-color: #fff;
}
Demo for the search bar. You can follow this.
or
if you want more different ones. You can check this: https://freefrontend.com/css-search-boxes/
Related
I want to create an input that contains a button that has an arrow down so the user can click on it to open a list or close it. I can't put the button inside the input, what do i miss here?
.input-wrapper {
position: relative;
}
.combobox-input {
font-size: 16px;
font-weight: normal;
color: #4d4d4d;
background: #ffffff;
border: 1px solid #828995;
height: 30px;
padding: 4px 10px;
}
.combobox-arrow {
display: inline-block;
padding: 6px;
border: none;
background-color: white;
background-image: url(...);
width: 25px;
height: 25px;
}
<div className="input-wrapper">
<input className="combobox-input"/>
<button className="combobox-arrow" ></button>
</div>
Try this and see if it suits your need:
(you can modify the snippet code as per your need)
document.getElementById('caret').addEventListener('click', function() {
// your code here if you want to add some logic
});
button#caret {
border: none;
background: none;
position: absolute;
top: 0px;
right: 0px;
}
.input-wrap {
position: relative;
display: inline;
}
<label>List of places<br/>
<div class="datalist-wrap">
<div class="input-wrap">
<input id="placesText" type="text" name="places" list="places"/>
<button id="caret"> ▼</button>
</div>
<datalist id="places">
<label>Select from the list:
<select name="places" id="select">
<option value="A"></option>
<option value="B"></option>
<option value="C"></option>
</select>
</label>
</datalist>
</div>
</label>
I need to place a button, with an icon, an input so I tried the HTML:
(JSFiddle Example: https://jsfiddle.net/mdmoura/zup3b24e/12/):
<form>
<div class="wrapper">
<input type="text">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</form>
With the following CSS:
form {
width: 400px;
}
.wrapper {
position: relative;
}
input {
font-size: 18px;
padding: 10px;
width: 100%;
}
button {
background-color: white;
border: none;
font-size: 24px;
position: absolute;
right: 0;
}
But this does not place the button inside the input.
How can this be done?
All you need to do is to add bottom: 8px; to the button so it is moved up by 8px, visually into the input box.
button {
background-color: white;
border: none;
font-size: 24px;
position: absolute;
right: 0;
bottom: 8px;
}
form {
width: 400px;
}
.wrapper {
position: relative;
}
input {
font-size: 18px;
padding: 10px;
width: 100%;
}
button {
background-color: white;
border: none;
font-size: 24px;
position: absolute;
right: 0;
bottom: 8px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form>
<div class="wrapper">
<input type="text">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</form>
Updated JSFiddle: https://jsfiddle.net/zup3b24e/14/
A simpler way to build an input form with font awesome inside if you want to go with this direction
input[type="text"] {
width: 400px;
height: 20px;
padding: 10px;
}
input[type="submit"] {
font-family: FontAwesome;
font-size: 24px;
margin-left: -50px;
background-color: white;
border: none;
-webkit-appearance: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text"><input type="submit" value="">
I've been trying to replicate this page https://vk.com/ You can see that they've changed the standard appearance of radio buttons in the 2nd form.
I succeeded in changing the design of the buttons but now they are all checked simultaneously.
HTML
<form class="form2">
<div class="heading">
<h2>Poprvé na VK?</h2>
<p>Okamžitá registrace</p>
</div>
<input type="text" placeholder="Vaše jméno" required>
<input type="text" placeholder="Vaše příjmení" required class="last-name">
<label class="birth">
<span>Datum narození
<i class="fa fa-question-circle-o"
aria-hidden="true"></i></span>
<input type="date" class="date" required>
</label>
<label>
<span class="gender-head">Pohlaví</span>
<div class="gender">
<input type="radio" id="1-option" name="selector" value="female" class="control">
<div class="button"></div>Žena
<input type="radio" id="2-option" name="selector" value="male" class="control">
<div class="button"></div>Muž
<input type="radio" id="3-option" value="other" name="selector" class="control">
<div class="button"></div>Jiné
</div>
</label>
<button type="submit">Zaregistrovat se</button>
<a href="#">
<i class="fa fa-facebook-square" aria-hidden="true"></i> Přihlásit se přes Facebook</a>
</form>
CSS
form {
width: 290px;
background-color: #fff;
padding: 20px 15px;
float: right;
border: 1px solid #E0E1E3;
font-size: 13px;
border-radius: 3px;
}
.form2 {
margin-right: 10px;
clear: right;
height: 380px;
display: flex;
flex-flow: row wrap;
color: #333436;
justify-content: center;
}
.form2 .heading {
flex-wrap: wrap;
margin: 0 auto;
}
.form2 h2 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 20px;
font-weight: 100;
}
.form2 p {
font-size: 12px;
margin: 2px 0 0 9px;
}
.form2 input {
height: 30px;
border-radius: 3px;
border: 1px solid #DBDCDE;
width: 270px;
margin-top: -15px;
margin-bottom: 0;
}
.form2 .last-name {
margin-top: -15px;
}
.form2 span {
font-weight: 600;
margin-top: -50px;
color: #7A7B7D;
font-size: 13px;
}
.form2 .birth {
margin: -15px 0 0 10px;
}
.form2 .date {
margin-top: 10px;
margin-bottom: -100px;
}
.form2 .gender-head {
margin-left: -10px;
margin-bottom: 20px;
}
.gender {
display: flex;
width: 260px;
margin: 15px 0 0px -10px;
justify-content: space-between;
font-size: 13px;
color: #000;
}
.gender input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.gender .button {
border: 1px solid #A3A4A6;
background: #fff;
border-radius: 50%;
height: 12px;
width: 12px;
margin-top: 2px;
margin-right: -40px;
}
.gender .button:hover {
cursor: pointer;
background-color: #EAEBED;
}
.gender .button::before {
display: block;
content: '';
height: 6px;
width: 6px;
border-radius: 50%;
}
input[type="radio"]:checked ~ .button {
border: 1px solid #5A7CA3;
}
input[type="radio"]:checked ~ .button::before {
background: #5A7CA3;
margin: 3px 2px 2px 3px;
}
::-webkit-input-placeholder {
color: #7A7B7D;
padding-left: 12px;
}
.form2 button {
height: 20px;
}
http://jsfiddle.net/Skidle/u3zj66sd/
I haven't learned JavaScript yet so I'd prefer CSS & HTML only solution. Thanks!
If you look at the radio buttons, by removing the position, you can see that only one is selected, and it is correct for each selection:
The problem lies in the way the presentation works. The CSS code:
input[type="radio"]:checked ~ .button::before // Is wrong.
input[type="radio"]:checked + .button::before // Is right.
Explanation
The code given for the CSS, ~ selector is a sibling selector, which selects all the selectors.
While, what you need is the + selector, which is the immediate or adjacent sibling selector. This selects only one.
Change needs to be done here:
input[type="radio"]:checked + .button::before {
background: #5A7CA3;
margin: 3px 2px 2px 3px;
}
Fiddle: http://jsfiddle.net/0rqu3s2c/
Note: There's an issue when you try to click on the other inputs. So, you might need to check what's blocking it. Please do not use absolute positioning without the desired result.
can someone help me achieve that 2 ínputs look like one divided by a slash
Also doing it with twitter-bootstrap
Idea : http://postimg.org/image/pcgbzj4s1/
What I got so far but there is divided also I think they should overlap(slash with inputs)
<input class="form-control" type="text" name="kerkim" id="input_main">
<i id="slash">/</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="submit" class="btn btn-ẃarning"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
http://codepen.io/oroborus357/pen/doVKEP Here's the quick codepen I made for you, it shoud do what you need :)
<span class="first"><input type="text" /></span><input class="second" type="text" />
body {
padding: 50px;
background: #333;
}
* {
box-sizing: border-box;
}
input {
background: white;
border: none;
padding-left: 15px;
}
.first {
position: relative;
}
.first:before {
content: "/";
position: absolute;
left: 100%;
top: 0;
height: 100%;
transform: translateX(-50%);
font-size: 18px;
}
Many ways to it... here's two.
Given this html:
<div class="container">
<input type="text">
<span class="slash"></span>
<input type="text">
</div>
With this CSS:
.container{
border: 1px solid #999;
display: inline-block;
border-radius: 3px;
background: #fff;
margin-top: 50px;
position: relative;
}
.container input{
border: none;
background: none;
}
.slash{
transform: scale(3);
position: absolute;
}
/* or.... */
.slash{
width: 2px;
height: 28px;
background: #999;
transform: rotate(20deg);
position: relative;
display: inline-block;
position: absolute;
top: -5px;
}
A demo here
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
`.ds-drop-down` {
background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent;
padding: 10px 5px;
height: 0px;
width: 8px;
position: absolute;
top: 63px;
border: 1px solid blue;
}
.ds-btn {
height: 22px;
width: 20px;
padding: 4px;
top: 63px;
position: absolute;
border: 1px solid blue;
left: 579px;
}
#span-advanced-search {
border: 2px solid blue;
left: 20px;
width: 600px;
padding: 10px;
}
input[type=checkbox]:checked ~ div {
background: green;
display: block;
visibility: visible;
position: absolute;
width: 600px;
padding: 10px;
}
<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/>
<input type="checkbox" id="toggle-1"></input>
<div id="span-advanced-search">
<label>Education Level:</label> <input type="text"/><br></br>
<label>Type of Learning Material:</label> <input type="text"/><br></br>
<label>Difficulty Level:</label> <input type="text"/><br></br>
<label>Author:</label> <input type="text"/><br></br>
</div>
I want to show div-> 'span-advanced-search' by clicking on the checkbox->'toggle-1'. Initially the div will be hidden and when the checkbox is unchecked then also the div must be hidden.
I have shared my code snippet above,it's not working,when i am clicking on the checkbox the div is not showing.Please help me.
I'm not sure if this is what you are looking for, but hope it helps some way.
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="checkbox"){
$("#span-advanced-search").toggle();
}
});
});
#span-advanced-search{
padding: 20px;
display: none;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" name="colorCheckbox" value="checkbox"></label>
</div>
<div id="span-advanced-search">
<label>Education Level:</label> <input type="text"/><br></br>
<label>Type of Learning Material:</label> <input type="text"/><br></br>
<label>Difficulty Level:</label> <input type="text"/><br></br>
<label>Author:</label> <input type="text"/><br></br>
</div>