I have created an Image Uploader by using bootstrap of its own, but when I use its bootstrap.css in my page <hr/> tags and other tags css gets affected and doesn't give proper output as I've designed. This is My Form in which I need to apply this Image Uploader. But when I insert or copy this Image Uploader scripts and its css to My Form in Image section. It disturbs my whole css and uses only bootstrap css and submits the form even onclick on clear button. After I mix both My Form & Image Uploader I get this output which is given below with code, snippet and this is the JSFIDDLE. I Please check My Form and the form after I add Image uploader it disturbs my css files and doesn't even show me preview of Images. I am not sure where am I going wrong.
$("#ImageUploader").submit(function (e) {
"use strict";
var fileUpload = $("#file")[0].files,
fileCount = $("#file")[0].files.length;
if (parseInt(fileCount) > 5) {
alert("You can only upload a maximum of 5 files");
e.preventDefault();
} else if (parseInt(fileCount) < 2) {
alert("You need to upload minimum 2 images");
e.preventDefault();
} else if (fileCount === 0 || typeof fileUpload === "undefined") {
alert("No files are selected.");
e.preventDefault();
}
});
function deleteAll() {
"use strict";
$(".img-preview-area").html("<p>Image Preview...</p>");
$(":file").filestyle('clear');
}
$("input:file").on('change', function () {
"use strict";
if (this.files.length >= 1) {
$(".img-preview-area").html("");
$("[id^=previewImg]").remove();
$.each(this.files, function (i, img) {
var reader = new FileReader(),
preview = $("<img class='img-responsive img-thumbnail image-container' />");
reader.onloadend = function () {
preview.attr("src", reader.result);
preview.attr("alt", img.name);
};
if (img) {
reader.readAsDataURL(img);
} else {
preview.src = "";
}
preview.appendTo(".img-preview-area");
});
}
});
function checkedAll(ele) {
"use strict";
var arrayOfElements = ele.closest("#colors").getElementsByTagName("input"),
item,
i = 0;
for (i; i < arrayOfElements.length; i = i + 1) {
item = arrayOfElements[i];
if (ele !== item && document.contains(item) === true) {
arrayOfElements[i].checked = ele.checked;
}
}
}
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true;
}
function isNumberKeyspecial(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true;
}
var message = "";
function clickIE() {
if (document.all) {
(message);
return false;
}
}
function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2 || e.which == 3) {
(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
function resetForm() {
"use strict";
var arrayOfElements = document.getElementsByTagName("input"),
item,
i = 0;
for (i; i < arrayOfElements.length; i = i + 1) {
item = arrayOfElements[i].name;
if (item.match(/qty/gi) !== null) {
arrayOfElements[i].disabled = true;
} else {
arrayOfElements[i].checked = false;
}
}
document.getElementById("masterform").reset();
}
function codename(ele) {
"use strict";
document.getElementsByName(ele.name + "qty")[0].disabled = !ele.checked;
}body {
background-image: url(../header_bg.jpg);
background-size: cover;
}
hr {
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
hr:after {
content:"\00a0";
}
textarea {
resize: none;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=radio] {
cursor: pointer;
}
b {
cursor: default;
}
th {
cursor: default;
}
td {
cursor: default;
}
input[type=text] {
cursor: cell;
}
textarea {
cursor: cell;
}
input[type="reset"] {
width: 10em;
height: 2em;
border: none;
background: transparent;
font-weight: bold;
cursor: pointer;
}
input[disabled] {
background: transparent;
border: none;
cursor: default;
}
input:disabled::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff;
}
input:disabled:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
}
input:disabled::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff;
}
input:disabled:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff;
}
#back {
width:28em;
height:2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;
}
#view {
width:10em;
height:2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;
}
#toptable {
box-shadow: 20px 20px 10px #000000;
background-color: white;
}
.col-centered {
float: none;
margin: 0 auto;
}
.pad-top {
padding-top: 15vh;
}
.image-container {
padding-right: 5px;
}
img {
max-height: 150px;
}<head>
<script src=".1.3/jquery.min.js"></script>
<script src=".js"></script>
<link rel="stylesheet" href=".3.4/css/bootstrap.min.css">
</head>
<body>
<b>
Wele : Username
</b>
<hr></hr>
<hr></hr>
<br/>
<h2><center>Bangles</center></h2>
<table border="2" id="toptable" align="center">
<tr>
<th>
<input type="button" value="View Products" name="view_products" id="view" onclick="location.href='addBangles.php'">
</th>
<th></th>
<th></th>
<th></th>
<th>
<input type="button" value="Go Back To The HomePage Of This Website" name="back" id="back" onclick="location.href='home.php'">
</th>
</tr>
</table>
<br/><br/>
<form action="" method="POST" enctype="multipart/form-data" id="masterform" name="masterform">
<table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
<tr>
<th>
<p align="Left">
Name : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
</td>
</tr>
<tr>
<th>
<p align="Left">Description : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<table border="0">
<textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
</td>
</table>
</tr>
<tr>
<th>
<p align="Left">Size & Weight<sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<table border="1">
<td title="Size 2.2">
<label>
<input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename(this)">2.2
<br>
<input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
</label>
</td>
<td title="Size 2.4">
<label>
<input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename(this)">2.4
<br>
<input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
</label>
</td>
<td title="Size 2.6">
<label>
<input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename(this)">2.6
<br>
<input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.8">
<label>
<input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename(this)">2.8
<br>
<input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.10">
<label>
<input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename(this)">2.10
<br>
<input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td style="border-style: none;">
<input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
</td>
</th>
</table>
</tr>
<tr>
<th>
<p align="Left">Color : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td id="colors">
<table>
<td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>
</label>
</td>
<td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>
</label>
</td>
<td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>
</label>
</td>
<td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>
</label>
</td>
</tr>
<tr>
<td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>
</label>
</td>
<td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red_Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>
</label>
</td>
<td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red_Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>
</label>
</td>
</tr>
<tr>
<td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>
</label>
</td>
<td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green_Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>
</label>
</td>
<tr>
<td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>
</label>
</td>
<tr>
<td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>
</label>
</td>
<td title="Select All" align="right" style="border-style: none;">
<input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(this);'>
</td>
<td style="border-style: none;"> <b title="Select All">All</b>
</td>
</table>
</td>
</tr>
</tr>
<tr>
<th>
<p align="Left">Price : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<table border="1">
<td>
<input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">
<td>
<input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
</td>
</td>
</tr>
</table>
<tr>
<th title="Special Price Validity Dates;(note it is valid only if entered special price)">
<p align="Left">Special Date : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td title="Special Price Validity Dates;(note it is valid only if entered special price)">
<table border="0">
<tr>
<th title="Special Price Validity Starting Date">Start Date:</th>
<td>
<input type="date" name="startingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th title="Special Price Validity Ending Date">End Date:</th>
<td>
<input type="date" name="endingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th> <font color="white" size="0">Hello</font>
</th>
</tr>
<tr>
<th> <font color="white" size="0">Hello</font>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<th title="Status(Should the Product be visible to the customers)">
<p align="Left">Status : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<label>Enable :
<input type="radio" name="status" value="enable" title="Enable The Status">
</label>
<label>Disable :
<input type="radio" name="status" value="disable" title="Disable The Status">
</label>
</th>
</tr>
<tr>
<th title="Tax Class(which type of tax should be applied on the product)">
<p align="Left">Tax Class : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<label>Taxable :
<input type="radio" name="tax" value="taxable" title="Taxable Goods">
</label>
<label>Shipping :
<input type="radio" name="tax" value="shipping" title="Shipping">
</label>  
<label>None :
<input type="radio" name="tax" value="None" title="None from both on the left">
</label>
</th>
</tr>
<tr>
<th title="Upload mages of your product">
<p align="Left">Images : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<div class="container pad-top">
<div class="row">
<div class="panel">
<div class="panel-body img-preview-area">
<p>Image Preview...</p>
</div>
<div class="panel-footer">
<button class="btn btn-warning" onClick="deleteAll()"><i class='glyphicon glyphicon-remove'></i> Clear</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-centered">
<input type="file" id="file" class="filestyle" name="files[]" multiple="multiple" accept="image/*">
</div>
</div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<th>
<input type="reset" name="reset" value="Reset" onclick="resetForm();" title="Reset All The Details">
</th>
<th></th>
<th></th>
<th></th>
<th>
<input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" id="upload" class="upload" style=" width: 33em;height: 2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;">
</th>
</tr>
</table>
</form>
</body>I have created an Image Uploader by using bootstrap of its own, but when I use its bootstrap.css in my page <hr/> tags and other tags css gets affected and doesn't give proper output as I've designed. This is My Form in which I need to apply this Image Uploader. But when I insert or copy this Image Uploader scripts and its css to My Form in Image section. It disturbs my whole css and uses only bootstrap css and submits the form even onclick on clear button. After I mix both My Form & Image Uploader I get this output which is given below with code, snippet and this is the JSFIDDLE. I Please check My Form and the form after I add Image uploader it disturbs my css files and doesn't even show me preview of Images. I am not sure where am I going wrong.
$("#ImageUploader").submit(function (e) {
"use strict";
var fileUpload = $("#file")[0].files,
fileCount = $("#file")[0].files.length;
if (parseInt(fileCount) > 5) {
alert("You can only upload a maximum of 5 files");
e.preventDefault();
} else if (parseInt(fileCount) < 2) {
alert("You need to upload minimum 2 images");
e.preventDefault();
} else if (fileCount === 0 || typeof fileUpload === "undefined") {
alert("No files are selected.");
e.preventDefault();
}
});
function deleteAll() {
"use strict";
$(".img-preview-area").html("<p>Image Preview...</p>");
$(":file").filestyle('clear');
}
$("input:file").on('change', function () {
"use strict";
if (this.files.length >= 1) {
$(".img-preview-area").html("");
$("[id^=previewImg]").remove();
$.each(this.files, function (i, img) {
var reader = new FileReader(),
preview = $("<img class='img-responsive img-thumbnail image-container' />");
reader.onloadend = function () {
preview.attr("src", reader.result);
preview.attr("alt", img.name);
};
if (img) {
reader.readAsDataURL(img);
} else {
preview.src = "";
}
preview.appendTo(".img-preview-area");
});
}
});
function checkedAll(ele) {
"use strict";
var arrayOfElements = ele.closest("#colors").getElementsByTagName("input"),
item,
i = 0;
for (i; i < arrayOfElements.length; i = i + 1) {
item = arrayOfElements[i];
if (ele !== item && document.contains(item) === true) {
arrayOfElements[i].checked = ele.checked;
}
}
}
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true;
}
function isNumberKeyspecial(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true;
}
var message = "";
function clickIE() {
if (document.all) {
(message);
return false;
}
}
function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2 || e.which == 3) {
(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
function resetForm() {
"use strict";
var arrayOfElements = document.getElementsByTagName("input"),
item,
i = 0;
for (i; i < arrayOfElements.length; i = i + 1) {
item = arrayOfElements[i].name;
if (item.match(/qty/gi) !== null) {
arrayOfElements[i].disabled = true;
} else {
arrayOfElements[i].checked = false;
}
}
document.getElementById("masterform").reset();
}
function codename(ele) {
"use strict";
document.getElementsByName(ele.name + "qty")[0].disabled = !ele.checked;
}body {
background-image: url(../header_bg.jpg);
background-size: cover;
}
hr {
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
hr:after {
content:"\00a0";
}
textarea {
resize: none;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=radio] {
cursor: pointer;
}
b {
cursor: default;
}
th {
cursor: default;
}
td {
cursor: default;
}
input[type=text] {
cursor: cell;
}
textarea {
cursor: cell;
}
input[type="reset"] {
width: 10em;
height: 2em;
border: none;
background: transparent;
font-weight: bold;
cursor: pointer;
}
input[disabled] {
background: transparent;
border: none;
cursor: default;
}
input:disabled::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff;
}
input:disabled:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
}
input:disabled::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff;
}
input:disabled:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff;
}
#back {
width:28em;
height:2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;
}
#view {
width:10em;
height:2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;
}
#toptable {
box-shadow: 20px 20px 10px #000000;
background-color: white;
}
.col-centered {
float: none;
margin: 0 auto;
}
.pad-top {
padding-top: 15vh;
}
.image-container {
padding-right: 5px;
}
img {
max-height: 150px;
}<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://markusslima.github.io/bootstrap-filestyle/js/bootstrap-filestyle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<b>
Wele : Username
</b>
<hr></hr>
<hr></hr>
<br/>
<h2><center>Bangles</center></h2>
<table border="2" id="toptable" align="center">
<tr>
<th>
<input type="button" value="View Products" name="view_products" id="view" onclick="location.href='addBangles.php'">
</th>
<th></th>
<th></th>
<th></th>
<th>
<input type="button" value="Go Back To The HomePage Of This Website" name="back" id="back" onclick="location.href='home.php'">
</th>
</tr>
</table>
<br/><br/>
<form action="" method="POST" enctype="multipart/form-data" id="masterform" name="masterform">
<table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
<tr>
<th>
<p align="Left">
Name : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
</td>
</tr>
<tr>
<th>
<p align="Left">Description : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<table border="0">
<textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
</td>
</table>
</tr>
<tr>
<th>
<p align="Left">Size & Weight<sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<table border="1">
<td title="Size 2.2">
<label>
<input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename(this)">2.2
<br>
<input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
</label>
</td>
<td title="Size 2.4">
<label>
<input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename(this)">2.4
<br>
<input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
</label>
</td>
<td title="Size 2.6">
<label>
<input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename(this)">2.6
<br>
<input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.8">
<label>
<input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename(this)">2.8
<br>
<input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.10">
<label>
<input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename(this)">2.10
<br>
<input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td style="border-style: none;">
<input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
</td>
</th>
</table>
</tr>
<tr>
<th>
<p align="Left">Color : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td id="colors">
<table>
<td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>
</label>
</td>
<td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>
</label>
</td>
<td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>
</label>
</td>
<td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>
</label>
</td>
</tr>
<tr>
<td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>
</label>
</td>
<td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red_Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>
</label>
</td>
<td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red_Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>
</label>
</td>
</tr>
<tr>
<td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>
</label>
</td>
<td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green_Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>
</label>
</td>
<tr>
<td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>
</label>
</td>
<tr>
<td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>
</label>
</td>
<td title="Select All" align="right" style="border-style: none;">
<input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(this);'>
</td>
<td style="border-style: none;"> <b title="Select All">All</b>
</td>
</table>
</td>
</tr>
</tr>
<tr>
<th>
<p align="Left">Price : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<table border="1">
<td>
<input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">
<td>
<input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
</td>
</td>
</tr>
</table>
<tr>
<th title="Special Price Validity Dates;(note it is valid only if entered special price)">
<p align="Left">Special Date : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td title="Special Price Validity Dates;(note it is valid only if entered special price)">
<table border="0">
<tr>
<th title="Special Price Validity Starting Date">Start Date:</th>
<td>
<input type="date" name="startingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th title="Special Price Validity Ending Date">End Date:</th>
<td>
<input type="date" name="endingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th> <font color="white" size="0">Hello</font>
</th>
</tr>
<tr>
<th> <font color="white" size="0">Hello</font>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<th title="Status(Should the Product be visible to the customers)">
<p align="Left">Status : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<label>Enable :
<input type="radio" name="status" value="enable" title="Enable The Status">
</label>
<label>Disable :
<input type="radio" name="status" value="disable" title="Disable The Status">
</label>
</th>
</tr>
<tr>
<th title="Tax Class(which type of tax should be applied on the product)">
<p align="Left">Tax Class : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<label>Taxable :
<input type="radio" name="tax" value="taxable" title="Taxable Goods">
</label>
<label>Shipping :
<input type="radio" name="tax" value="shipping" title="Shipping">
</label>  
<label>None :
<input type="radio" name="tax" value="None" title="None from both on the left">
</label>
</th>
</tr>
<tr>
<th title="Upload mages of your product">
<p align="Left">Images : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<div class="container pad-top">
<div class="row">
<div class="panel">
<div class="panel-body img-preview-area">
<p>Image Preview...</p>
</div>
<div class="panel-footer">
<button class="btn btn-warning" onClick="deleteAll()"><i class='glyphicon glyphicon-remove'></i> Clear</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-centered">
<input type="file" id="file" class="filestyle" name="files[]" multiple="multiple" accept="image/*">
</div>
</div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<th>
<input type="reset" name="reset" value="Reset" onclick="resetForm();" title="Reset All The Details">
</th>
<th></th>
<th></th>
<th></th>
<th>
<input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" id="upload" class="upload" style=" width: 33em;height: 2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;">
</th>
</tr>
</table>
</form>
</body>- Try keeping your css link after bootstrap's css link. I am talking about link for the files. – sanjeev shetty Commented Jul 28, 2015 at 10:13
- @sanjeevshetty Well I did try that but it wasn't helpful and it was still affecting design of the page and even submitting on clicking on clear button – Hardik Sisodia Commented Jul 28, 2015 at 10:16
- maybe insert "!important" in what class affect by boostrap or extract whatever needed in boostrap to do what you want to your css file? – Eezo Commented Jul 28, 2015 at 10:24
- @HenryVarro Is there any way to sort out or extract and use only that particular css style which is needed for Image Uploader to work and not the whole bootstrap.css. I think sorting or extracting styles from the bootstrap will help but since it large I've no clue how can I remove useless styles from bootstrap css and extract only the ones which are needed for Image uploader to work. – Hardik Sisodia Commented Jul 28, 2015 at 10:29
- @HardikSisodia use the DevTool of the browser to see which classes are using in boostrap and copy them to your css file, just check carefully every div so you not forget anything – Eezo Commented Jul 28, 2015 at 11:17
3 Answers
Reset to default 2As mentioned by sanjeev, first thing is to link the bootstrap.css file BEFORE your custom CSS file. If some of Bootstrap's styling is effecting your styling, then give your elements classes and style them more specifically.
I notice your CSS is targeting plain elements like td, so give the td's, tr's classes and target them in your CSS like td.classname {properties}.
Alternatively, give the parent table / div a class and specify the elements as children of the parent, i.e. table.classname tr {properties}.
you can check out you files as follows:
css property renders by order,you can render you files like this:
<link rel="stylesheet" href="mon/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="mon/css/own.css" />you can use "!important" make sure you css property implemented,like this:
.important-css { color: red !important; }
import your own custom css file after importing bootstrap css:
import 'bootstrap/dist/css/bootstrap.min.css';
import './style.css';