I want to make a board consisting of tiles but I do not know how to fill up the entire board area. I have only gotten up to 1 column of the board, as shown in the image. How can I fill this board so that each tile can be changed if clicked on or such?
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
hr {
width: 500px;
}
#board {
width: 1000px;
height: 1000px;
float: center;
display: grid;
background-color: rgb(126, 124, 122);
border: 6px solid rgb(0, 0, 0);
}
.tile {
width: 200px;
height: 200px;
border: 5px solid bisque;
border-radius: 10%;
font-size: 40px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.picker {
width: 100px;
height: 100px;
border: 5px solid bisque;
margin: 0 auto;
border-radius: 10%;
align-content: left;
align-self: left;
}
.tile {
background-color: rgb(255, 255, 255);
color: black;
}
.float-child {
width: 10%;
padding: 10px;
border: 2px solid rgb(0, 0, 0);
vertical-align: left;
}
<body>
<h1>Play-Color</h1>
<hr>
<div class="game">
<div class="float-child">
<button class="picker" style="background-color: red"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: blue"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: green"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: yellow"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: grey"></button>
<h4>count = 0</h4>
<br>
<button class="picker"></button>
<br>
</div>
<div id="board" class="float-child" style="position:relative; left:900px; top:-1000px" >
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
</div>
</div>
</div>
</body>
[2]UpdatedImage
........................................................................................................................................................................................
There are many steps to achieve the wanted result. Normally I wouldn't code this on SO. I just did it because I had fun it it. For the feature dont expect others to code a whole game for you for free!
See the comments within HTML, CSS and JS for furtehr info.
You have to create your color to pick from. The smartest solution IMHO is the use of radio-buttons. The Radio button will even without a script only allow the selection of one choice:
<input type="radio" name="color" value="color-name" id="color-name">
To not break the game you should always have one color selected. To ensure that on start one color is already selected you add the checked-attribtue to one color such as:
<input type="radio" ... checked>
Next you have to hide the checkboxes to be invisible and not cunsumign any space which you do through CSS:
input { display: none; }
Then you have to add the color as visual box by adding a <label>. That has the advantage that you can click on the label and it will select the correct radio button:
<label for="color-name">
After that you color the label with the color you want. While you do that, you can also set a CSS-Class to the same color in the same instance to allow the painting with that color:
label[for=color-name],
.color-name {
background-color: color-name;
}
Finally you have to create a grid. You can do that easily through JS or hardcode it to HTML. Sicne I dont want to explain you on how to do it correctly through JS (which would cost me another 30 minutes of my lifetime) I will hardcode it through HTML. In my case I used a grid-container: <div class="game-board">. Then I added 25x child elements: <div class="card"></div>. To make the grid 5x5 dimensions I used CSS on the Grid-Container to create 5 columns:
.game-board {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
As said already in the comments, you don't need buttons to be clickable for JS. The label of the radio buttons are clickable already (as they are labels). You can run a script even when not being clickable by simply usign the EventListener to check for a click-event by using JS:
element.addEventListener('click', e => {
// statements
});
To only select the grid-cards and not the container itself or possibel other content you can check if the element that was clicked on contains a specific class:
if (e.target.classList.contains('card')) {
// statements
}
In case that grid-card already has a color as CSS-Class applied to, we have to remove all potencial classes that would prevent the CSS to work correctly (it would only show the color of the class that is listed last in CSS):
e.target.className = ''
Unfortunatly the last step also removed the card class and as such we have to re-add this class:
e.target.classList.add('card');
Once we did that, we use a switch-case-statement which is cleaner then writing tons of if/else-statements. You can google guides and tutorials on your own. That switch-statement now checks what radio-button is checked and applies a class to the element you clicked on that adds the background-color:
e.target.classList.add('color-name');
EDIT
To include a counter you can use the JS lenght-statement:
document.querySelectorAll('.game-board .color-name').length. this statement will count the number of elements that contain a specific class.
Then simply use innerHTML-statement to display the count:
element.innerHTML = document.querySelectorAll('.game-board .color-name').length
var board = document.querySelector('.game-board')
// eventListener to listen to click events on the game board
board.addEventListener('click', e => {
console.clear();
// checks if a card and not the agme baord itself was clicked on
if (e.target.classList.contains('card')) {
const card = e.target.classList;
// checks which color has been selected
var color = document.querySelector('.color-picker input:checked').value;
// removes all classes from the clicked on element to allow re-painting
e.target.className = '';
// re-adds the "card" class to the clicked element
card.add('card');
// switch statement to add the class with the selected color to paint the grid-card
switch (color) {
case "red":
card.add('red');
break;
case "blue":
card.add('blue');
break;
case "green":
card.add('green');
break;
case "yellow":
card.add('yellow');
break;
case "gray":
card.add('gray');
break;
}
// color-counter
var countRed = document.querySelectorAll('.game-board .red').length,
countBlue = document.querySelectorAll('.game-board .blue').length,
countGreen = document.querySelectorAll('.game-board .green').length,
countYellow = document.querySelectorAll('.game-board .yellow').length,
countGray = document.querySelectorAll('.game-board .gray').length;
// displaying the counter
var labelRed = document.querySelector('#count-red span'),
labelBlue = document.querySelector('#count-blue span'),
labelGreen = document.querySelector('#count-green span'),
labelYellow = document.querySelector('#count-yellow span'),
labelGray = document.querySelector('#count-gray span');
labelRed.innerHTML = countRed;
labelBlue.innerHTML = countBlue;
labelGreen.innerHTML = countGreen;
labelYellow.innerHTML = countYellow;
labelGray.innerHTML = countGray;
}
});
/* aligning the color picker and game board next to each other */
body {
margin: 0;
padding: 10px;
box-sizing: border-box;
display: flex;
gap: 10px;
min-height: 100vh;
}
/* box for the color */
.color-picker {
border: 1px solid black;
display: flex;
flex-direction: column;
padding: 5px 30px;
gap: 10px;
}
/* hides the radio button */
.color-picker > input {
display: none;
}
/* creatign a visual border to see what color has been selected */
input:checked + label {
border: 3px solid black;
}
/* setting a "color-box" to the radio-button */
.color-picker > label {
display: block;
box-sizing: border-box;
aspect-ratio: 1 / 1;
min-width: 50px;
}
/* settign the color of the color picker and classes for painting */
label[for=red],
.red {
background-color: red;
}
label[for=blue],
.blue {
background-color: blue;
}
label[for=green],
.green {
background-color: green;
}
label[for=yellow],
.yellow {
background-color: yellow;
}
label[for=gray],
.gray {
background-color: gray;
}
/* game board that creates a board of 5x5 with equal dimensions */
.game-board {
flex-grow: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 5px;
}
/* Setting the grid-cards to be squares */
.game-board > .card {
aspect-ratio: 1 / 1;
border: 1px solid red;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
/* To make the grid-cards and label appear like buttons on hover */
.color-picker > label:hover,
.card:hover {
cursor: pointer;
}
<!-- Letting you select the color -->
<div class="color-picker">
<input type="radio" name="color" value="red" id="red" checked>
<label for="red"></label>
<div id="count-red">Count: <span>0</span></div>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue"></label>
<div id="count-blue">Count: <span>0</span></div>
<input type="radio" name="color" value="green" id="green">
<label for="green"></label>
<div id="count-green">Count: <span>0</span></div>
<input type="radio" name="color" value="yellow" id="yellow">
<label for="yellow"></label>
<div id="count-yellow">Count: <span>0</span></div>
<input type="radio" name="color" value="gray" id="gray">
<label for="gray"></label>
<div id="count-gray">Count: <span>0</span></div>
</div>
<!-- The game board as a grid -->
<div class="game-board">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
Related
I want to hide 1, 3 and 2 & 4 not change their position.
div{
width: 10%;
float: left;
}
<div style="background-color: blue"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>
visibility hidden will keep the space of the element but not show it:
div {
width: 10%;
float: left;
}
div:nth-child(1),
div:nth-child(3) {
visibility: hidden;
}
<div style="background-color: blue">
<p>1</p>
</div>
<div style="background-color: yellow">
<p>2</p>
</div>
<div style="background-color: red">
<p>3</p>
</div>
<div style="background-color: green">
<p>4</p>
</div>
visibility hidden only for hiding the element here but element position will left as blank so you can see white spaces rather than element. it is advisable to use class or id to get accurate result
div {
width: 10%;
float: left;
}
.blue{
visibility:hidden;
}
.red{
visibility:hidden;
}
<div class="blue" style="background-color: blue">
<p>1</p>
</div>
<div class="yellow" style="background-color: yellow">
<p>2</p>
</div>
<div class="red" style="background-color: red">
<p>3</p>
</div>
<div class="green" style="background-color: green">
<p>4</p>
</div>
You could set their opacity to 0, that whay they wont be visible and they wont affect the other div's positions
.box{
display: flex;
}
.blue{
opacity: 0;
}
.red{
opacity: 0;
}
<div class="box">
<div class="blue" style="background-color: blue"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div class="red" style="background-color: red"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>
</div>
As #Lalalena Mentioned in comment, you can use visibility:hidden
div{
width: 10%;
float: left;
}
.hidden{
visibility: hidden;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
<div class="blue hidden"><p>1</p></div>
<div class="yellow"><p>2</p></div>
<div class="red hidden"><p>3</p></div>
<div class="green"><p>4</p></div>
div{
width: 10%;
float: left;
}
<div style="background-color: blue; visibility:hidden;"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red; visibility:hidden;"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>
;
The visibility CSS property shows or hides an element without changing the layout of a document.
Depending on how you want to toggle the colors here's a quick example that uses buttons to toggle the visibility of groups of elements. Inline CSS has been moved to make the HTML cleaner, and the JS easier to use. Links for MDN documentation at the bottom of the answer.
// Cache the containers, and add a listener to the
// buttons container
const colors = document.querySelector('.colors');
const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick);
// When a child in the buttons container is
// clicked (see event delegation below)...
function handleClick(e) {
// ...first check it's a button
if (e.target.matches('button')) {
// ... destructure its id from the dataset
const { id } = e.target.dataset;
// ... and use the id to toggle those elements
// in the colors container which have a `color` class
// and a class that matches the id
// (using a template string to create the selector)
colors
.querySelectorAll(`.color.${id}`)
.forEach(color => color.classList.toggle('hidden'));
}
}
.colors { display: flex; width: 60%; justify-content: left; align-items: center; }
.color { width: 20%; text-align: center; border: 2px solid white; }
.red { background-color: red; }
.blue { background-color: lightblue; }
.yellow { background-color: yellow; }
.green { background-color: lightgreen; }
.orange { background-color: orange; }
.pink { background-color: pink; }
.hidden { visibility: hidden; }
.buttons { margin-top: 1em; }
<div class="colors">
<div class="color group3 pink"><p>1</p></div>
<div class="color group1 blue"><p>2</p></div>
<div class="color group2 yellow"><p>3</p></div>
<div class="color group1 red"><p>4</p></div>
<div class="color group2 green"><p>5</p></div>
<div class="color group3 orange"><p>6</p></div>
</div>
<div class="buttons">
<button data-id="group1">Toggle group 1</button>
<button data-id="group2">Toggle group 2</button>
<button data-id="group3">Toggle group 3</button>
</div>
Additional documentation
classList / toggle
addEventListener
Destructuring assignment
Event delegation
matches
querySelector / querySelectorAll
Template/string literals
I have a quiz blog/website on blogger. To show the answers of questions I have following html code:
<button class="acc">Show Answer</button>
<div class="pnl">
<p>Correct Answer</p>
</div>
<button class="acc">Show Answer</button>
<div class="pnl">
<p>Correct Answer</p>
</div>
<button class="acc">Show Answer</button>
<div class="pnl">
<p>Correct Answer</p>
</div>
And JavaScript like this:
<script type='text/javascript'>
//<![CDATA[
var acc = document.getElementsByClassName("acc");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var pnl = this.nextElementSibling;
if (pnl.style.display === "block") {
pnl.style.display = "none";
} else {
pnl.style.display = "block";
}
});
}
//]]>
</script>
And CSS like this:
.acc {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .acc:hover {
background-color: #ccc;
}
.pnl {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
If some one clicks on all of the buttons, the buttons are acting as toggles rather than, showing one answer, then when the next button is clicked, hiding the previous answer and showing the new one in its place. What needs to be changed to enable this?
Thanks
Remove the buttons.
Add the following over each .pnl
<!-- #ids must be unique so btn* = btn1, btn2, etc -->
<!-- [for] of label must match #id of input -->
<input id='btn*' class="acc" name='acc' type='radio' hidden>
<label for='btn*'>Show Answer</label>
Explination: A label and a form control (ex. <input>, <select>, etc) can be associated with each other if the form control has an #id and the label has a [for] that match. If one gets clicked, checked, etc then the other one does as well.
Add the following CSS:
.acc:checked+label+.pnl {
display: block
}
Explination: If an input is checked then the .pnl that is front of the label that is in front of the input. Note, when a group of radio buttons share a [name] only one may be checked at a time. Also, the radio buttons are hidden so it looks as if the label is the only tag interacting with the user.
.acc {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.acc:hover {
background-color: #ccc;
}
.pnl {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.acc:checked+label+.pnl {
display: block
}
label {
display: block
}
<input id='btn1' class="acc" name='acc' type='radio' hidden>
<label for='btn1'>Show Answer</label>
<div class="pnl">
<p>Correct Answer</p>
</div>
<input id='btn2' class="acc" name='acc' type='radio' hidden>
<label for='btn2'>Show Answer</label>
<div class="pnl">
<p>Correct Answer</p>
</div>
<input id='btn3' class="acc" name='acc' type='radio' hidden>
<label for='btn3'>Show Answer</label>
<div class="pnl">
<p>Correct Answer</p>
</div>
Try this one by using a forEach.
var acc = document.getElementsByClassName("acc");
let pn1 = document.getElementsByClassName("pnl");
for (let i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
[...acc].forEach((item,index) =>{
if(item == acc[i]){
pn1[index].style.display = "block";
}else{
pn1[index].style.display = "none";
}
})
})
}
.acc {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .acc:hover {
background-color: #ccc;
}
.pnl {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<button class="acc">Show Answer</button>
<div class="pnl">
<p>Correct Answer</p>
</div>
<button class="acc">Show Answer</button>
<div class="pnl">
<p>Correct Answer</p>
</div>
<button class="acc">Show Answer</button>
<div class="pnl">
<p>Correct Answer</p>
</div>
I have 2 tabs that lay on a block with a background image. Depending on which tab is clicked, the background image of the tabs and the tab content panel should change height. I cannot do it through CSS so I thought of using JS to change heights, but it is not working.
Here is my code:
$('#two-tab').click(function() {
$('.search-tabs').height('350px');
$('#two-panel').height('272px')
});
.search-tabs {
background-image: url('https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg')!important;
background-position: center top!important;
height: 281px!important;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.tab-radio{
display:none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel{
display:block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab{
background:#F5A000;
color:#000;
}
.tab-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.tab {
cursor: pointer;
width: 160px;
padding: 5px 0px;
margin: 0px 10px;
background: #FFF;
display: inline-block;
text-align: center;
color: #000;
border-radius: 6px 6px 0px 0px;
font-size: 13px;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.panels {
height: 229px;
width: 333px;
position: relative;
border-radius: 0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
.panel {
display: none;
animation: fadein .8s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tabs">
<div class="tab-wrapper">
<input class="tab-radio" id="one" name="group" type="radio" checked>
<input class="tab-radio" id="two" name="group" type="radio">
<div class="tabs">
<label class="tab" id="one-tab" for="one">Tab 1</label>
<label class="tab" id="two-tab" for="two">Tab 2</label>
</div>
<div class="panels">
<div class="panel" id="one-panel">
Content for tab 1
</div>
<div class="panel" id="two-panel">
Content for tab 2
</div>
</div>
</div>
</div>
But this is not working. Any ideas?
You defined the height for .search-tabs with !important which overwrites the height that you set in the click handler.
!! I added my own picture so you please swap it with a picture of your desire.
!! This is the only JavaScript code that you will need for this to work, The lines that you wrote, I deleted them
!! Add this code in the JavaScript file and delete the previous code that you wrote.
This piece of code will do the follows
If you click tab 2 it will change the height of the desired elements
If you click tab 1 it will bring all the elements back to their original form.
ps: when you copy this code in your editor, right-click on the display and click on format document or just click (shift + alt + f)
const searchContainer = document.querySelector(".search-tabs");
const panel = document.querySelector("#two-panel");
const tabOne = document.querySelector("#two-tab");
const tabTwo = document.querySelector("#one-tab");
let changingFunc = function(one, two) {
searchContainer.style.height = `${one}`;
panel.style.height = `${two}`;
};
const panelHeight = panel.offsetHeight;
tabOne.addEventListener("click", function() {
changingFunc("350px", "272px");
});
tabTwo.addEventListener("click", function() {
changingFunc("281px", `${panelHeight}px`);
});
hello guys i got small problem in javascript..
i want to change the background color of .gradient_color class and the color should be another class attribute value... i want to do this with 50+ divs all divs with different color .. how can i set the .gradient_color div background with the value of data-clipboard-text
<div class="box">
<div class="gradient_color"></div>
<div
class="copyButton"
data-clipboard-text="background: linear-gradient(to right, #8e2de2,#8f6ba8);"
>
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div
class="copyButton"
data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)"
>
COPY
</div>
</div>
you could get all the .gradient_color elements using querySelectorAll and loop over the returned collection. In each iteration, get the next element sibling for the current .gradient_color element and read its data-clipboard-text attribute and set is as background of the current .gradient_color element
const divs = document.querySelectorAll('.gradient_color');
divs.forEach(d => {
d.style.background = d.nextElementSibling.dataset.clipboardText;
})
.gradient_color {
width: 50px;
height: 50px;
border: 1px solid;
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
COPY
</div>
</div>
This should work as well:
const gradientColors = document.querySelectorAll('.gradient_color');
const copyButtons = document.querySelectorAll('.copyButton');
gradientColors.forEach((div,index)=>{
const color = copyButtons[index].dataset.clipboardText;
div.style.background=color;
});
.gradient_color {
width: 50px;
height: 50px;
border: 1px solid;
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
COPY
</div>
</div>
I hope this answers your question?
let elem_with_color_class = document.querySelectorAll('.copyButton');
elem_with_color_class.forEach((elem) => {
elem.addEventListener('click', function() {
let parent = this.parentElement;
let target_elem = parent.querySelector('.gradient_color');
target_elem.style.background = this.getAttribute('data-clipboard-text');
});
});
.box {
display: inline-flex;
justify-content: space-around;
align-items: center;
}
.gradient_color {
height: 30px;
width: 50px;
border: 1px solid #aaa;
margin: 1em;
display: inline-block;
}
.copyButton {
height: 30px;
width: 100px;
font-size: 12px;
font-weight: 500;
font-family: "Quicksand", sans-serif;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #fff;
user-select: none;
outline: none;
background: darkseagreen;
border-radius: 2px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.10);
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">COPY</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">COPY</div>
</div>
I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!
Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>
This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>