What I have are 3 images but are not online , I need to get link these three pictures to go on different pages !
each image each link
var images = [
'image/dragao1.jpg',
'image/dragao2.jpg',
'image/dragao3.jpg'
];
function slideShowForward() {
images.push(images.shift());
document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')';
}
function slideShowBack() {
images.unshift(images.pop());
document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')';
}
<div id="imagesP" style=" border: 1px solid black; height: 200px; width:750px;">
<div id="form">
<input type="button" value="previous" onclick="slideShowBack();" style="width: 39px; height: 34px;" />
<input type="button" value="next" onclick="slideShowForward();" style="width: 39px; height: 34px;" />
</div>
</div>
var images = [
'http://cinemacomrapadura.com.br/imagens/2014/01/20140127-como-treinar-seu-dragao1.jpg',
'http://cinemacomrapadura.com.br/imagens/2014/01/20140127-como-treinar-seu-dragao2.jpg',
'http://br.web.img2.acsta.net/c_520_690/newsv7/15/02/06/17/22/496087.jpg'
];
var hrefs=["http://www.google.com","http://www.msdn.com","http://www.yahoo.com"]
function slideShowForward() {
images.push(images.shift());
hrefs.push(hrefs.shift());
document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')';
document.getElementById('imagesP').setAttribute(href,hrefs[0]);
}
function slideShowBack() {
images.unshift(images.pop());
hrefs.unshift(hrefs.pop());
document.getElementById('imagesP').style.backgroundImage = 'url(' + images[0] + ')';
document.getElementById('imagesP').setAttribute(href,hrefs[0]);
}
window.onload=function() {
document.getElementById('imagesP').onclick=function(e) {
var tgt = e.target||e.srcElement;
if (tgt.tagName.toLowerCase()=="input") e.preventDefault();
else location=this.getAttribute("href");
}
}
#imagesP { border: 1px solid black; height: 200px; width:750px; background-image: url(http://br.web.img2.acsta.net/c_520_690/newsv7/15/02/06/17/22/496087.jpg)}
<div id="imagesP" href="http://www.google.com">
<div id="form">
<input type="button" value="previous" onclick="slideShowBack();" style="width: 39px; height: 34px;" />
<input type="button" value="next" onclick="slideShowForward();" style="width: 39px; height: 34px;" />
</div>
</div>
Related
How can I animate this so when the div appears and disappears expands down and retracts up? I thought maybe with css3 animations but when I add transition animations to my CSS it doesn't do anything.
function SearchToggle(){
var off=document.getElementById('SearchContainer');
if (off.style.display == "none") {
off.style.display = "block";
} else {
off.style.display = "none";
}
}
#SearchContainer {
border: none;
outline: none;
display: block;
background-color: silver;
color: #FFF;
margin: 0 0 0 0;
float: left;
width: 400px;
min-width: 400px;
max-width: 400px;
height: 40px;
min-height: 40px;
max-height: 40px;
}
<menu name="WindowMenu" id="WindowMenu" class="WindowMenu">
<span name="WindowIcon-Span" id="WindowIcon-Span" class="WindowIcon-Span">
<img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG" class="WindowIcon-PNG" />
</span>
<span name="WindowTitle" id="WindowTitle" class="WindowTitle"> PROTON CORE </span>
<div name="WindowControl-Wrapper" id="WindowControl-Wrapper" class="WindowControlWrapper">
<i name="SearchIcon" id="SearchIcon" class="fa-solid fa-magnifying-glass" onclick="SearchToggle()"></i>
<input type="button" value="" name="WindowControl-1" id="WindowControl-1" class="WindowControl-1" onclick="window.close(true)" />
<input type="button" value="" name="WindowControl-2" id="WindowControl-2" class="WindowControl-2" />
</div>
</menu>
<form name="SearchContainer" id="SearchContainer" class="SearchContainer">
</form>
I tried this instead to try an animate the height transition with CSS but it's ceased to work after changing it to height.
function SearchToggle(){
var off=document.getElementById('SearchContainer');
if (off.style.height == "0px") {
off.style.height = "40px";
} else {
off.style.display = "0px";
}
}
#SearchContainer {
border: none;
outline: none;
background-color: silver;
color: #FFF;
margin: 0 0 0 0;
float: left;
width: 400px;
min-width: 400px;
max-width: 400px;
height: 0px;
//min-height: 40px;
//max-height: 40px;
transition: height 2s;
}
Ok, Here is what I think you want:
var current = "up";
function SearchToggle(){
if(current == "up"){
document.getElementById("WindowMenu").classList.remove("WindowMenuUp")
document.getElementById("WindowMenu").classList.add("WindowMenuDown")
current = "down";
}
else {
document.getElementById("WindowMenu").classList.remove("WindowMenuDown")
document.getElementById("WindowMenu").classList.add("WindowMenuUp")
current = "up";
}
}
.WindowMenuDown {
height: 40px;
transition: 1s;
}
.WindowMenuUp {
height: 0;
transition: 1s;
}
#WindowControl-Wrapper {
overflow: auto;
}
<menu name="WindowMenu" id="WindowMenu" class="">
<span name="WindowIcon-Span" id="WindowIcon-Span" class="WindowIcon-Span">
<img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG" class="WindowIcon-PNG" />
</span>
<span name="WindowTitle" id="WindowTitle" class="WindowTitle"> PROTON CORE </span>
<div name="WindowControl-Wrapper" id="WindowControl-Wrapper" class="WindowControlWrapper">
<i name="SearchIcon" id="SearchIcon" class="fa-solid fa-magnifying-glass"></i>
<input type="button" value="" name="WindowControl-1" id="WindowControl-1" class="WindowControl-1" onclick="window.close(true)" />
<input type="button" value="" name="WindowControl-2" id="WindowControl-2" class="WindowControl-2" />
</div>
</menu>
<form name="SearchContainer" id="SearchContainer" class="SearchContainer">
<input type="button" value="Button" onclick="SearchToggle()">
</form>
If you decide to use JQuery as requested, here is a snippet:
#WindowControl-Wrapper {
display: none;
overflow: auto;
}
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<menu name="WindowMenu" id="WindowMenu" class="">
<span name="WindowIcon-Span" id="WindowIcon-Span" class="WindowIcon-Span">
<img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG" class="WindowIcon-PNG" />
</span>
<span name="WindowTitle" id="WindowTitle" class="WindowTitle"> PROTON CORE </span>
<div name="WindowControl-Wrapper" id="WindowControl-Wrapper" class="WindowMenuUp">
<input type="button" value="" name="WindowControl-1" id="WindowControl-1" class="WindowControl-1" onclick="window.close(true)" />
<input type="button" value="" name="WindowControl-2" id="WindowControl-2" class="WindowControl-2" />
</div>
</menu>
<form name="SearchContainer" id="SearchContainer" class="SearchContainer">
<input type="button" value="Button" id="button">
</form>
<script type="text/javascript">
<!--
$(document).ready(function(){
var current = "up";
$('#button').on('click',function() {
if(current == "up"){
$('#WindowControl-Wrapper').show(500).slideDown(500);
current = "down"
}
else{
$('#WindowControl-Wrapper').hide(500).slideUp(500);
current = "down"
}
});
})
//-->
</script>
</body>
Goal: Append the value added to an input to the div with the matching name="" tag value.
Problem: The code I proved (below) works fine when there is only one div and one input or even two divs and one input but when I add a second input the code doesn't perform as it did when there was only one input.
$('.example-default-value').each(function() {
var default_value = this.value;
$(this).focus(function() {
if (this.value == default_value) {
this.value = '';
}
});
$(this).blur(function() {
if (this.value == '') {
this.value = default_value;
}
});
});
function example_append() {
if ($('.example-textarea').attr('name') === $('.example').attr('name')) {
$('.example').append($('.example-textarea').val());
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example" name="add" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<div class="example" name="add1" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<form>
<div><textarea class="example-default-value example-textarea" name="add1" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
<div><textarea class="example-default-value example-textarea" name="add" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
<div><input type="button" value="Append" onclick="example_append()" /></div>
</form>
You should target the desired elements using Attribute value Selector and the get its value.
function example_append() {
$('.example').append(function() {
return $('.example-textarea[name=' + $(this).attr('name') + ']').val()
});
}
function example_append() {
$('.example').append(function() {
return $('.example-textarea[name=' + $(this).attr('name') + ']').val()
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example" name="add" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<div class="example" name="add1" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<form>
<div><textarea class="example-default-value example-textarea" name="add1" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
<div><textarea class="example-default-value example-textarea" name="add" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
<div><input type="button" value="Append" onclick="example_append()" /></div>
</form>
There are more than one textareas, so you need to apply loop.
function example_append() {
const divs = $('div');
const inputs = $('.example-textarea');
inputs.each(function() {
const that = $(this);
divs.each(function(i, div) {
if ($(div).attr('name') == that.attr('name')) {
$(div).text(that.val());
}
});
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example" name="add" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<div class="example" name="add1" style="border: 1px solid rgb(204, 204, 204);float: left; margin: 5px 0pt; padding: 5px;">Example div</div>
<form>
<div><textarea class="example-default-value example-textarea" name="add1" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
<div><textarea class="example-default-value example-textarea" name="add" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
<div><input type="button" value="Append" onclick="example_append()" /></div>
</form>
The problem is that your textareas don't have unique names, so this code won't work (multiple elements are found):
if ($('.example-textarea').attr('name') === $('.example').attr('name')){
$('.example').append($('.example-textarea').val());
}
Here is a vanilla JS (i.e. no JQuery) example you can use to get the desired results:
<div id="add1"></div>
<div id="add"></div>
<textarea name="add1"></textarea>
<textarea name="add"></textarea>
<button>append</button>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
document.querySelectorAll('textarea')
.forEach(t => {
let name = t.getAttribute('name');
let value = t.value;
document.getElementById(name).innerHTML = value;
});
});
This question asked before and I read all of them, tried to implement the suggestions given but no luck. It's a calculator with basic functionality.
Numbers are not displaying in the screen, operators are not working. Basically, js file is not working.
- Scope issue; Inserted js file in window.onload=function(){}.
- Tried to find bugs but code looks okay.
I linked css and js files as separate, code is working in JsBin but not any browsers.
Any suggestions:
Here are my codes:
<!DOCTYPE html>
<html>
<head>
<title> Basic Calculator </title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="container">
<form name="calculator">
<input type="text" id="display" />
<br>
<input type="button" value=' CLEAR ' class="operator" onclick='clearDisplay("clear")' />
<input type="button" value=' DEL ' class="keys" onclick='backSpace()' />
<input type="button" value=' + ' class="keys" onclick='passToScreen("+")' />
<br />
<input type="button" value=' 9 ' class="keys" onclick='passToScreen("9")' />
<input type="button" value=' 8 ' class="keys" onclick='passToScreen("8")' />
<input type="button" value=' 7 ' class="keys" onclick='passToScreen("7")' />
<input type="button" value=' - ' class="keys" onclick='passToScreen("-")' />
<br />
<input type="button" value=' 6 ' class="keys" onclick='passToScreen("6")' />
<input type="button" value=' 5 ' class="keys" onclick='passToScreen("5")' />
<input type="button" value=' 4 ' class="keys" onclick='passToScreen("4")' />
<input type="button" value=' * ' class="keys" onclick='passToScreen("*")' />
<br />
<input type="button" value=' 3 ' class="keys" onclick='passToScreen("3")' />
<input type="button" value=' 2 ' class="keys" onclick='passToScreen("2")' />
<input type="button" value=' 1 ' class="keys" onclick='passToScreen("1")' />
<input type="button" value=' / ' class="keys" onclick='passToScreen("/")' />
<br />
<input type="button" value=' 0 ' class="keys" onclick='passToScreen("0")' />
<input type="button" value=' . ' class="keys" onclick='passToScreen(".")' />
<input type="button" value=' = ' class="operator" onclick='doMath()' />
<br />
</form>
</div>
</body>
</html>
CSS code:
body {
background-color: lightgrey;
}
#container {
position: relative;
width: 300px;
height: 320px;
border: 2px solid blue;
border-radius: 4px;
background-color: white;
padding: 20px;
margin: 50px auto;
box-shadow: 3px 2px 2px 1px lightblue;
}
input[type=button] {
background: lightgrey;
width: 20%;
font-size: 20px;
font-weight: 900;
font: white;
margin: 2%;
border-radius: 4px;
box-shadow: 0px 0px 2px 1px black;
outline: none;
}
#container .operator {
width: 45%;
}
input[type=text] {
position: relative;
display: block;
height: 40px;
width: 93%;
border: 2px solid black;
border-radius: 5px;
box-shadow: 0px 0px 1px black;
margin: 5px 5px -2px 5px;
text-align: right;
outline: none;
font-size: 25px;
font-weight: bold;
padding-right: 5px;
}
JS file:
window.onload = function() {
var screen = document.getElementById("display");
function passToScreen(x) {
screen.value += x;
}
function clearDisplay() {
screen.value = "";
}
function doMath() {
var y = screen.value;
y = eval(y);
screen.value = y;
}
function backSpace() {
var elem = screen.value;
var newElem = elem.slice(0, elem.length - 1);
screen.value = newElem;
}
}
Thank you for your time.
Cheers #Tiyor.
When you load the js via window.onload your functions are only available within the scope of that closure.
Attempting to refer to them in the onclick handler will fail because it needs them to be globally available.
You need to add the functions to the window object like this
window.onload=function(){
var screen = document.getElementById("display");
window.passToScreen = function (x) {
screen.value += x;
}
window.clearDisplay = function () {
screen.value = "";
}
window.doMath = function() {
var y = screen.value;
y = eval(y);
screen.value = y;
}
window.backSpace = function() {
var elem = screen.value;
var newElem = elem.slice(0, elem.length - 1);
screen.value = newElem;
}
}
https://jsbin.com/dugiyuwuco/1/edit?html,css,js,output
.image-upload > input
{
display: none;
}
.upload-icon{
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
}
.upload-icon img{
width: 60px;
height: 60px;
margin:19px;
cursor: pointer;
}
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file"/>
</div>
</form>
I want to upload only image with input type file, when an image will be selected for upload then, upload image icon will replace within the selected image(like bellow screenshot). I did not write any script. what should be the script?
You can try use jQuery for this. I made an example below.
The code to make the preview is this:
function readURL(input) {
var id = $(input).attr("id");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('label[for="' + id + '"] .upload-icon').css("border", "none");
$('label[for="' + id + '"] .icon').hide();
$('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
}
reader.readAsDataURL(input.files[0]);
}
}
$("input[id^='file-input']").change(function() {
readURL(this);
});
I've made it more dynamic so you can use the input field multiple times, as in your example image.
Hope it helps you.
function readURL(input) {
var id = $(input).attr("id");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('label[for="' + id + '"] .upload-icon').css("border", "none");
$('label[for="' + id + '"] .icon').hide();
$('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
}
reader.readAsDataURL(input.files[0]);
}
}
$("input[id^='file-input']").change(function() {
readURL(this);
});
.image-upload>input {
display: none;
}
.upload-icon {
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
float: left;
}
.upload-icon .icon {
width: 60px;
height: 60px;
margin: 19px;
cursor: pointer;
}
.prev {
display: none;
width: 95px;
height: 92px;
margin: 2px;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
<img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload">
<label for="file-input2">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
<img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input2" type="file" />
</div>
<div class="image-upload">
<label for="file-input3">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
<img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input3" type="file" />
</div>
</form>
There is a simplest way for this using one line of code. You can create this using URL.createObjectURL(), check working snippet for this
$('#file-input').change( function(event) {
$("img.icon").attr('src',URL.createObjectURL(event.target.files[0]));
$("img.icon").parents('.upload-icon').addClass('has-img');
});
.image-upload > input
{
display: none;
}
.upload-icon{
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
}
.upload-icon img{
width: 60px;
height: 60px;
margin:19px;
cursor: pointer;
}
.upload-icon.has-img {
width: 100px;
height: 97px;
border: none;
}
.upload-icon.has-img img {
width: 100%;
height: auto;
border-radius: 18px;
margin:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file"/>
</div>
</form>
I think you want to show preview of your selected image.
$("#file-input").change(function () {
readURL(this, 'sampleImageId');
$('.upload-icon').css('border-style','none');
});
function readURL(input, id) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#' + id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
.image-upload > input
{
display: none;
}
.upload-icon{
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
}
.upload-icon img{
width: 90px;
height: 87px;
margin:5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img id="sampleImageId" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file"/>
</div>
</form>
I've been able to make a section of a form that dynamically adds a tier of inputs on a button click. This new div is appended after the previous div and I am attempting to make a button that can also remove the tier if the user doesn't need it.
My problem is I cannot seem to remove the divs. I can add but not remove. When I look at the DOM I can see when the addDiv button is clicked, it is indeed adding the div and all the content is within the div, so it is being appended properly. But when I try to remove the newly appended div from it's parent element, I get the following error thrown:
addJob.js:18 Uncaught TypeError: Cannot read property 'parentNode' of undefinedremoveJob # addJob.js:18onclick # index.html:1
I'm unsure how to make my removeJob() function defined in a way that is just the reverse of how it was added.
CodePen: http://codepen.io/theodore_steiner/pen/WGEmGr
var i = 0;
function addJob() {
if (i <= 1) {
i++;
var div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_' + i + '"> '+
'<input type="text" class="three-lines" name="position_' + i + '"> '+
'<input type="text" class="three-lines" name="years_' + i + '">'+
'<input type="button" value="-" onclick="removeJob()">';
document.getElementById("employmentHistory").appendChild(div);
}
}
function removeJob(div) {
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
button {
height: 20px;
width: 20px;
background: none;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 25px;
}
input[type="button"] {
height: 20px;
width: 20px;
background: none;
border: 1px solid #ccc;
outline: none;
margin-left: 20px;
}
input[type="button"]:focus {
outline: none;
}
input.three-lines {
margin-left: 18px;
background: none;
border: none;
border-bottom: 1px solid #b3c1cc;
width: 150px;
margin-bottom: 30px;
}
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
You function is right just add the paramter "this" when you put the function in the onclick attribute, like this:
onclick="removeJob(this)"
Well, As per Below discussion passing this in the parameter is the best way to achieve this.
Below is the working code for this-
var i = 0;
var div = null;
function addJob()
{
if(i <= 1)
{
i++;
div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_'+i+'"> <input type="text" class="three-lines" name="position_'+i+'"> <input type="text" class="three-lines" name="years_'+i+'"><input type="button" value="-" onclick="removeJob(this)">';
document.getElementById("employmentHistory").appendChild(div);
}
}
function removeJob(div)
{
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
button
{
height: 20px;
width: 20px;
background: none;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 25px;
}
input[type="button"]
{
height: 20px;
width: 20px;
background: none;
border: 1px solid #ccc;
outline: none;
margin-left: 20px;
}
input[type="button"]:focus
{
outline: none;
}
input.three-lines
{
margin-left: 18px;
background: none;
border: none;
border-bottom: 1px solid #b3c1cc;
width: 150px;
margin-bottom: 30px;
}
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
Hoping this will help you :)